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)

Gurtej Singh · Accepted Answer · 2017-04-03T15:19:00.977

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.

Thank you Gurtej! I tried with .add() method but still not working. I created 2 codepens if someone wants to have fun ;) https://codepen.io/anon/pen/wJOveM (multiple scenes) https://codepen.io/anon/pen/dvryog?editors=1111 (w/ timeline NOT WORKING) — Pegui, Apr 03 '17 at 13:36
@Pegui Thanks for making the codepen. Now it is much more clear as to what you wanted. I did not understand that you wanted all of the particles to animate at once. Please see my updated answer above, I believe I have got it working now. — Gurtej Singh, Apr 03 '17 at 15:15

Scrollmagic TimelineMax not animating

1 Answers1