Scrollmagic TimelineMax not animating

Question

I'm trying to figure out how to use TimelineMax with Scrollmagic. The problem is easy to explain.

I have similar DOM elements, like particles that have to move slowly than scrolling speed.

This first implementation is WORKING (no Timeline)

var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
$particles.each(function() {
    var tween = TweenMax.to($(this), 1, { y: -100, ease: Linear.easeNone });
    var scene = new ScrollMagic.Scene({
        triggerElement: ".wrapper",
        duration: 1000
    });
    scene.setTween(tween);
    scene.addTo(controller);
}); 

The second implementation is NOT WORKING (uses Timeline)

var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
var timeline = new TimelineMax();
$particles.each(function() {
    timeline.to($(this), 1, {  y: -200, ease: Linear.easeNone });
});
var scene = new ScrollMagic.Scene({
    triggerElement: ".wrapper",
    duration: 1000
});
scene.setTween(timeline)
scene.addTo(controller);

I'd like to make timeline working but elements are not animating. They move but with null timing.

Thank you for help

--- CODEPENS ---

https://codepen.io/anon/pen/wJOveM (multiple scenes)

https://codepen.io/anon/pen/dvryog?editors=1111 (w/ timeline NOT WORKING)

Answer 1

Can you try to use the TimelineMax .add() method instead of the .to() method in you second implementation? So your code should look like this:

var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
var timeline = new TimelineMax();
$particles.each(function() {
    timeline.add(TweenMax.to($(this), 1, {  y: -200, ease: Linear.easeNone }),0);
});
var scene = new ScrollMagic.Scene({
    triggerElement: ".wrapper",
    duration: 1000
});
scene.setTween(timeline)
scene.addTo(controller);

Also, for better debugging, please add the .addIndicators() method to the scene to see indicators on the screen, which can really help in debugging while scrolling. You can try to play with the duration property as well to see if things work properly.

UPDATE: Since all the particles needed to be moving at the same time, I added a ,0 property at the end of every .add method call. This ensures that all the tweens are triggered at the same positions. You can read more about the position property here:

https://greensock.com/asdocs/com/greensock/TimelineLite.html#add()

Here's hopefully a working example this time :)

https://codepen.io/anon/pen/ryROrv

Hope this helps. Cheers.