Scrollmagic TimelineMax does not animate

Question

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

I have similar DOM elements, such as particles, that need to move slowly than the scroll speed.

This first implementation is WORK (without a 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 DOES NOT WORK (uses a 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 would like to make a work schedule, but the elements do not come to life. They move, but with zero time.

thanks for the help

--- CODEPENS ---

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

https://codepen.io/anon/pen/dvryog?editors=1111 (DOES NOT WORK with the timeline)

Answer 1

TimelineMax .add() .to() ? :

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

, .addIndicators() , , . , , .

UPDATE: , ,0 .add. , . position :

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

, , :)

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

, . .