How to animate multiple scenes?

Question

JavaScript

Hello. I have a code that works for a single element using ScrollMagic. This is a simple animation of the moving out element.

<script type="text/javascript">

    var controller = new ScrollMagic.Controller();

    var tl = new TimelineLite({});
    tl.from(".img-soon-mob", 0.75, {
        top: 300
    });

    new ScrollMagic.Scene({
            triggerElement: ".w-img-soon-mob",
            duration: 0,
            offset: 100
        })
        .setTween(tl)
        .addTo(controller);
    </script>

But the problem is that I need several elements that do not appear at the same time and move to different places at different speeds. I couldn't think of anything better than trying to add a second scene.

var controller = new ScrollMagic.Controller();

    var tl = new TimelineLite({});
    var tl2 = new TimelineLite({});
    tl.from(".img-soon-mob", 0.75, {
        top: 300
    });
    tl2.from(".img-soon-mob", 0.55, {
        top: 150
    });

    new ScrollMagic.Scene({
            triggerElement: ".w-img-soon-mob",
            duration: 0,
            offset: 100
        })
        .setTween(tl)
        .addTo(controller);

    new ScrollMagic.Scene2({
            triggerElement: ".w-img-soon-mob2",
            duration: 0,
            offset: 200
        })
        .setTween(tl2)
        .addTo(controller);
    >

But for some reason nothing comes out. They move the same distance. Where is the mistake? And is it worth using this solution for these needs? Maybe take another library? I should have about 20 items leaving, almost simultaneously, but at different speeds for different distances, and yet not quite simultaneously. Thank you.