jingqi_fan

TweenMax Variable Update on Scroll

Recommended Posts

Hi guys,

 

I'm a newbie in GSAP. I modified the GreenSock's ModifiersPlugin: Seamless Loop Codepen in the hopes of getting close to the effect as seen in this website (if you scroll down a bit to the selected clients section of the linked page, you will see that the marquee on the site can be sped up relative to your scroll speed).

 

Here's my Codepen: https://codepen.io/jingqifan/pen/xmYxOR?editors=1111

 

I tried to do that by calling my tweenmax function in the Jquery on scroll function with the updated variable "move", but the animation is quite janky and doesn't feel as natural as the one seen in index.studio/about. The marquee animation also doesn't reset back to the original slower speed after you scroll.

 

Any help is appreciated for getting the effect as close to the reference website as possible. Just a single marquee will do.

 

Thank you so much!

Share this post


Link to post
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

 

Instead of recreating the tween with different end values for x on each scroll I think you will be better off just creating the tween once and changing its timeScale()

 

timeScale() allows you to adjust the speed of an animation

 

animation.timeScale(0.5) // half speed

animation.timeScale(1) // normal speed

animation.timeScale(2) // double speed

 

 

The demo below shows how you can smoothly adjust the timeScale of a timeline using an html5 input slider.

 

 

 

 

 

 

You can normalize your scroll position values and pass them into the timeScale of your tween

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Hi @jingqi_fan,

 

Just a try - not tested in all browsers ...

 

 

Happy scrolling ...

Mikel

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Hello!

 

Thank you all so much for the prompt response.

Thanks for the timescale pointers and the codepen demo! I made another codepen based on the above demo: 

 

However, when I stop scrolling it stops very abruptly and it doesn't seem like its really binding to my scroll like it did in here in their selected clients section. The tween also seem to have a lag after my scroll happens. The animation wait a bit to speed up and then when I stop scrolling it waits a bit to set the timescale back to 1. Is there a way to respond to my scroll immediately?

Share this post


Link to post
Share on other sites

if you comment out line 97 it seems to work as expected

 

scrollStop(function () {
   // action.timeScale(1).play();
});

 

not sure why you are resetting timeScale(1) like that.

  • Thanks 1

Share this post


Link to post
Share on other sites

Hi,

 

Based on cases of  @GreenSock (marquee, smooth play) here the next attempt

 

 

Since a too fast marquee makes me crazy, here's another test on how to use scroll speed:

 

 

Happy scrolling

Mikel

 

 

  • Like 3

Share this post


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.