Jump to content
Search Community

TweenMax Variable Update on Scroll

jingqi_fan 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

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

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

 

 

 

 

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

 

 

  • Like 3
Link to comment
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: 

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?

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