Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jakub40

Many setTween

Recommended Posts

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

 

Link to comment
Share on other sites

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

 

 

  • Like 2
Link to comment
Share on other sites

	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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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/

  • Like 4
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×