Load div and animation on page scroll

Question

I have a group of DIVs that contain animations, these DIVs are hidden when the page loads. Each of these animations runs on a timer but they run whilst the DIVs are hidden.

These DIVs set to appear as the page scrolls but by this point the animations have finished! Is there a way to load the animation after they appear?

Heres my Fiddle: http://jsfiddle.net/fatfrank44/wRfu5/

CSS

#content-wrapper {
height: 500px;
float: left;
visibility: visible;
}
#container, #container2 {
width: 331px;
height: 105px;
margin: 15px;
background-color: #666;
}   
.numbers {
width: 36px;
height: 50px;
background-color: #dc000f;
float: left;
}

HTML:

<div id="content-wrapper">
<div id="container">
            <div class="numbers"></div>
        </div>
        <div id="container2">
            <div class="numbers"></div>
        </div>
</div>

JS:

<script>
    $(document).ready(function() {
        var controller = $.superscrollorama();
        // individual element tween examples
        controller.addTween('#container', TweenMax.fromTo( $('#container'), .25, {css:{opacity:0, scale:0, }, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, scale:1}, ease:Quad.easeInOut}));
        controller.addTween('#container2', TweenMax.fromTo( $('#container2'), .25, {css:{opacity:0, scale:0, }, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, scale:1}, ease:Quad.easeInOut}));
    });
</script>

 <script>
$(document).ready(function () {
$('.numbers').delay(1).animate({
    'margin-left': '100px'
}, {
    duration: 1000,
    queue: true
});
});
</script>

Does [this](http://stackoverflow.com/questions/16325679/activate-css3-animation-when-the-content-scrolls-into-view "see post") post not answer your question? — Steve, Sep 10 '13 at 14:22
Very close. This runs animations via css3 classes, unfortunately all my animations are JS. Is there a way to combine the JS above using something like '$.when().done();' as #mrash suggested? Thanks :) — dave, Sep 10 '13 at 15:28

score 1 · Accepted Answer · answered Sep 11 '13 at 09:14

1

I managed to get this to work with the following code. It laods the DIV as you scroll down the page:

<script type="text/javascript">
$(window).scroll( function() {  
    if ( $(window).scrollTop() > 100 ) {  
       loadDiv();  
    }  
});  
function loadDiv() {  
    $('#container-holder').fadeIn('slow', function() {  
        $(this).fadeTo("slow", 1);  
        $('#container').fadeTo("fast", 1);
        $('.numbers').delay(500).fadeIn({duration:1000, queue:false}).animate({'margin-left':  '100px'}, {duration:1500, queue:false});
    });  
}  
</script>

answered Sep 11 '13 at 09:14

dave

203
4
21

you can read [$.when() manual](http://api.jquery.com/jQuery.when/) for more information, it's better than delay and setTimeout. Or use [this link](http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/) for using algorithm. – mrash Sep 11 '13 at 13:55
Thanks #mrash - I'll take a look at those links, appreciate your help ! – dave Sep 13 '13 at 17:12

score 0 · Answer 2 · answered Sep 10 '13 at 12:10

If I understand what you are trying to do...

Your animation will play right after page load thanks to $(document).ready. You should put animation code inside addTween method to start animation right after adding elements into page/making them visible.

Load div and animation on page scroll

2 Answers2