Jump to content
GreenSock

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

Controlling the speed of Tween on scroll

Recommended Posts

I have the following:

 

    var secOne  = new ScrollMagic.Scene({ triggerElement: '.section-a', triggerHook: 0, duration: $(window).height() - 100 })
      .setTween(
        new TimelineMax()
          .add( TweenMax.fromTo(['.section-a .svg-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, force3D: false, ease:Power4.easeNone }) )
          .add( TweenMax.fromTo(['.section-a .text-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, ease:Power4.easeNone } ) )
      )
     .setPin('.section-a')
    .addTo(controller);

 

Which is fine apart from the fact that the animations have to come in smooth no matter how fast the user scrolling up or down. In this case if the user scrolls to fast then the animated parts suddenly show up. Is there a way to slow down the tween so that no matter if the user scrolling really fast they'll always get a smooth in out response from the animated tween? 

As you can see I have tried 'ease:Power4.easeNone' and that works to a degree but there's really nothing that stops it from zooming in on a fast scroll movement. Also I know scroll jacking is the work of Beelzebub but I'm being forced into this against better reasoning.

Thanks

 

Link to post
Share on other sites

If you're going to have ScrollMagic hijack the tween duration, the tween will play based on user scroll speed. It won't matter if you set the tween duration to 0.5 or 50 seconds. For those types of effects, I just set my default ease to Linear. If you don't like the user being able to control the speed of the animation via scroll, you can skip the duration in the ScrollMagic parameters and the actual duration of the tween will be used. That way you'll have a smooth tween every time you hit the trigger.

 

Happy tweening.

:)

  • Like 1
Link to post
Share on other sites

Thanks Point C,

 

How do I skip the duration? If I take it and the tween durations then nothing shows up? 

Link to post
Share on other sites

I'm not sure what you mean by "nothing shows up" ?

 

Here's a basic example of using the actual tween duration when you hit the trigger:

See the Pen ayJPJx by PointC (@PointC) on CodePen

You set up your scene triggerElement and triggerHook as you normally would - just skip the duration. Hopefully that helps.

 

Happy tweening.

:)

  • Like 2
Link to post
Share on other sites
On 08.08.2017 at 6:33 PM, PointC said:

If you're going to have ScrollMagic hijack the tween duration, the tween will play based on user scroll speed. It won't matter if you set the tween duration to 0.5 or 50 seconds.


I have the same problem here, i need to control the speed of animation during scrolling the whole screen with Scrollmagic, but there's no way to do that as I see.
For example a simple parallax effect when the background layer top is updated according to the windowScrollTop * someRatio. 
 

new ScrollMagic.Scene({
                duration: "100%",
                triggerElement: ".section2",
                triggerHook: 0.5,                
                reverse: true
            })
            .setTween(new TweenMax("#bg",1,{y:"-10%",  ease: Linear.easeNone}))
            .addTo(controller);

this moves at the same speed as the user scrolls, very fast,
i need it to scroll 0.5*scrollTop slower that the user scrolls. Any ideas how to do that?

Link to post
Share on other sites
29 minutes ago, CustomIz said:

i need it to scroll 0.5*scrollTop slower that the user scrolls. Any ideas how to do that?

 

I'm assuming duration is mapped to the height of the window.

 

As @PointC said the speed of the tween is mapped to the duration so to slow it down to 1/2 speed relative to user scroll presumably you would want to make the duration 200%.

 

 

  • Like 1
Link to post
Share on other sites

If we remove the duration, then pushFollowers is disabled and the section overlaps with content below..

Link to post
Share on other sites

Hey @Christos Tsangaris and welcome to the GreenSock forums! This thread is quite old. How about you make a new thread related to the issue that you're facing?

  • Like 2
Link to post
Share on other sites
Just now, ZachSaucier said:

Hey @Christos Tsangaris and welcome to the GreenSock forums! This thread is quite old. How about you make a new thread related to the issue that you're facing?

Will do tomorrow! Thanks Zach!

Link to post
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.

×