[Many setTween]

4 hours ago, Visual-Q said:

	var tl =  new TimelineMax()
        .set(".layer_8", {top: "100px"}) // the tween durtion can be omitted and defaults to 1
        .set(".layer_7", {top: "100px"}) // the tween durtion can be omitted and defaults to 1
        .set(".layer_6", {top: "55px"}) // the tween durtion can be omitted and defaults to 1
        .set(".layer_4", {top: "35px"}) // the tween durtion can be omitted and defaults to 1
        .set(".layer_3", {top: "20px"}) // the tween durtion can be omitted and defaults to 1
        .set(".layer_2", {top: "5px"}) // the tween durtion can be omitted and defaults to 1
        .set(".layer_1", {top: "-100px"}); // the tween durtion can be omitted and defaults to 1
    
    
    var controller = new ScrollMagic.Controller();
    var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550})
    // animate color and top border in relation to scroll position
        .setTween(tl)
        .addIndicators({name: "2 (duration: 400)"}) // add indicators (requires plugin)
        .addTo(controller);

 

 

I believe you can set timelines as well as tweens so something like this should work.

 

I'm not an expert on Scroll Majic but I believe you were confusing the Scroll Majic '.setTween' method which attaches a tween to a Scroll Majic scene with the GSAP '.set' method which sets a property on an object.

This solution add inline styles to all elements from timeline but dont animate it on scroll from value 0 to value in Timeline hmm

[Many setTween]

7 hours ago, Acccent said:

Hi jakub40,

 

This looks like it's related to ScrollMagic, which this forum isn't dedicated to. You'd probably have more luck looking at ScrollMagic's official documentation or asking in its issues page on GitHub.

 

However, from what I can tell, it looks like maybe you shouldn't be chaining .setTween methods immediately after creating the new scene? So you could try something like:

var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550});

scene.setTween(".layer_8", {top: "100px"})
     .setTween(".layer_7", {top: "100px"})
     ...

 

 

Unfortunately, it works the same as my solution ;/

[Many setTween]

Hello i have question. How to setTween to many different elements??

 

    var controller = new ScrollMagic.Controller();
    var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550})
    // animate color and top border in relation to scroll position
        .setTween(".layer_8", {top: "100px"}) // the tween durtion can be omitted and defaults to 1
        .setTween(".layer_7", {top: "100px"}) // the tween durtion can be omitted and defaults to 1
        .setTween(".layer_6", {top: "55px"}) // the tween durtion can be omitted and defaults to 1
        .setTween(".layer_4", {top: "35px"}) // the tween durtion can be omitted and defaults to 1
        .setTween(".layer_3", {top: "20px"}) // the tween durtion can be omitted and defaults to 1
        .setTween(".layer_2", {top: "5px"}) // the tween durtion can be omitted and defaults to 1
        .setTween(".layer_1", {top: "-100px"}) // the tween durtion can be omitted and defaults to 1


        .addIndicators({name: "2 (duration: 400)"}) // add indicators (requires plugin)
        .addTo(controller);