Jump to content
Search Community

Controlling the speed of Tween on scroll

heavylifting test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
Share on other sites

  • 8 months later...
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 comment
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 comment
Share on other sites

  • 1 year later...

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.
×
×
  • Create New...