Guest Posted May 8, 2020 Share Posted May 8, 2020 Hi there, I am trying to create some sort of 'autoplay' with gsap. the background of each link should change automatically when the page loads - so after 2 seconds, go to the next link and make that active. But if you hover over a link, that link should be active and all others shouldn't be. And then if you move your mouse out of hover and no into another hover state, the autoplay should resume. I know, quite a mouthful. I have tried to implement it with stagger - but I think I need to be pointed in the right direction. Any help greatly appreciated. Thank you! See the Pen JjYLRpa by erayner (@erayner) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 8, 2020 Share Posted May 8, 2020 Hey erayner. What you're essentially wanting is a (minimal) slideshow. There are a lot of examples of slideshows with GSAP on these forums, but here's the core approach for your use case: Build a function that makes all the links un-active and then makes one link active using an index passed as a parameter. Save that index to a variable so it's accessible later. Use a .delayedCall() to call a function that makes the next link active after your allotted time. Make sure that function handles looping back to the start. The function should call itself again using a delayedCall. When a link has a mouseover event fired, make that link active, clear the old delayedCall and start another one. That's it! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now