Autoplay 'hover' of links

[Guest]

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

[ZachSaucier]

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:

1. 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.
2. 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.
3. When a link has a mouseover event fired, make that link active, clear the old delayedCall and start another one.

That's it!