Many setTween

[jakub40]

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

 

[Acccent]

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"})
     ...

 

 

[Visual-Q]

	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.

[jakub40]

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

[jakub40]

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

[Sahil]

You can add your tweens in a timeline and then pass that timeline to the setTween method.

 

Quote

Add a tween to the scene.
If you want to add multiple tweens, add them into a GSAP Timeline object and supply it instead (see example below).

If the scene has a duration, the tween's duration will be projected to the scroll distance of the scene, meaning its progress will be synced to scrollbar movement.
For a scene with a duration of 0, the tween will be triggered when scrolling forward past the scene's trigger position and reversed, when scrolling back.
To gain better understanding, check out the Simple Tweening example.

Instead of supplying a tween this method can also be used as a shorthand for TweenMax.to() (see example below).

 

http://scrollmagic.io/docs/animation.GSAP.html#Scene.setTween

 

GSAP doesn't have default duration on tweens, you will need to use to, from or fromTo methods to create your tweens.

 

If you are not familiar with GSAP or timelines checkout the 'Sequencing and grouping tweens with TimelineLite'  section on following page, https://greensock.com/get-started-js

 

Also check the examples page on ScrollMagic, there are enough examples to find almost all solutions,  http://scrollmagic.io/examples/

[Visual-Q]

8 hours ago, jakub40 said:

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

 

Sorry that'as what I thought you wanted. As @Sahil noted to animate to these positions you have to use GSAPs animation methods.