Загрузить div и анимацию на прокрутке страницы

Question

У меня есть группа DIV, которые содержат анимации, эти DIVs скрыты при загрузке страницы. Каждая из этих анимаций работает по таймеру, но они запускаются, в то время как DIVs скрыты.

Эти DIVs должны отображаться как свитки страниц, но к этому моменту анимация завершена! Есть ли способ загрузить анимацию после ее появления?

Heres мой 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> 

Answer 1

Мне удалось заставить это работать со следующим кодом. Он подбирает DIV, когда вы прокручиваете страницу вниз:

<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> 

Answer 2

Если я понимаю, что вы пытаетесь сделать ..

Ваша анимация будет воспроизводиться сразу после загрузки страницы благодаря $(document).ready. Вы должны поместить анимационный код внутри метода addTween, чтобы начать анимацию сразу после добавления элементов в страницу/сделать их видимыми.