TweenMax Variable Update on Scroll

[jingqi_fan 1 Likes (Newbie)]

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: 

 

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!

See the Pen xmYxOR?editors=1111 by jingqifan (@jingqifan) on CodePen

[Carl 9,066 Likes (Superhero)]

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.

 

 

 

 

See the Pen xmYObO?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

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

 

 

[mikel 1,823 Likes (Superhero)]

Hi @jingqi_fan,

 

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

 

See the Pen JwpYjR by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

 

[jingqi_fan 1 Likes (Newbie)]

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: 

See the Pen VqQQvw?editors=1111 by jingqifan (@jingqifan) on CodePen

 

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?

[Carl 9,066 Likes (Superhero)]

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.

[jingqi_fan 1 Likes (Newbie)]

Thank you! That’s worked!

[mikel 1,823 Likes (Superhero)]

Hi,

 

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

 

See the Pen qLxwPy by mikeK (@mikeK) on CodePen

 

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

 

See the Pen maWvve by mikeK (@mikeK) on CodePen

 

Happy scrolling

Mikel