Jump to content
Search Community

How to change slider auto play speed with scroll velocity

Paper Krane test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

So I am trying to replicate an effect I recently saw (the inspiration for what I am trying to build can be found at the top of the page here) and managed to figure out the endless slider effect (yep, I am definitely far from being a gsap master). But now that I have the endless effect, I want to figure out how they sped up the effect on the users scroll. I linked what I currently have built via CodePen.

 

I found this post that effects the speed of an animation using ScrollTrigger but it was recommended to use the containing div and animate that which doesn't really work for this case, at least I don't think it does but I am open to being wrong. I would appreciate any insight on how one might be able to adjust the slider scroll speed on scroll down. 

 

And before I end this, thank you to everyone in the GreenSock team. This library is incredibly powerful and unbelievably helpful. I just wish I would of tested it out sooner.

 

 

See the Pen zYjELKE by paperkrane (@paperkrane) on CodePen

  • Like 2
Link to comment
Share on other sites

  • Solution

Hi @Paper Krane and welcome to the GreenSock forums!

 

First thanks for the kind words about GSAP, is great to see that you're having fun and enjoying the tools! 🥳

 

Regarding what you're trying to achieve the main concept is to update the slider's timeScale in order to make it go faster and then take the timescale back to one (it's natural value). I created an example using two approaches to achieve the same. One is to use scroll trigger and detect the velocity in a specific zone of the page. The other is to use the Observer Plugin to check mouse wheel and touch events and affect the time scale of the tween.

 

This example has by default the approach using ScrollTrigger and the one using Observer Plugin commented out. I prefer the ScrollTrigger approach since there is no need to update the element's time scale when is not visible, something we can achieve in a very simple way with ScrollTrigger

See the Pen jOxGegE by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

1 hour ago, Rodrigo said:

Regarding what you're trying to achieve the main concept is to update the slider's timeScale in order to make it go faster and then take the timescale back to one (it's natural value). I created an example using two approaches to achieve the same. One is to use scroll trigger and detect the velocity in a specific zone of the page. The other is to use the Observer Plugin to check mouse wheel and touch events and affect the time scale of the tween.

 

I honestly had nod idea I could even edit the timeScale. This is huge and opens up the door to so many different ideas. Thank you for this! Off to explore more in the docs now. 

  • Like 2
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...