How to start animation on hover/scroll

[mikedev]

Hi,

 

Just looking for a little bit of help. I'm extremely new to Greensock, and just all aspects of javascript for that matter. I've managed to create a timeline animation that I'm happy with, through the usage of morphSVG, DrawSVG etc (which are amazing btw!) and I really would like to use it on my website. The trouble is im not entirely sure as to how I would go about using it, I was thinking about having it start on hover? Hover or perhaps once the user has scrolled down the page to a point? At the moment I just have it repeating.

 

I appreciate that this probably isn't GreenSock related, but hopefully you could help point me in the right direction? Any help at all would be fantastic, thanks.

See the Pen YgdYjd by sdevitt8 (@sdevitt8) on CodePen

[PointC]

Hi @mikedev 

 

Welcome to the forum and thanks for joining Club GreenSock.

 

Good job on your first animation. In answer to your question, either of those things is certainly possible. You could trigger it on scroll with a library like ScrollMagic or code it with some plain JS or jQuery. To trigger it on hover, you'd just pause the timeline and play() it on hover.

 

It really depends on where the animation will be on your site. If it's up in the banner area, maybe just repeating every so often is fine. Maybe try a couple different approaches and see which you like better? If you get stuck on any GSAP related parts, we're happy to help.

 

Happy tweening and welcome aboard.

 

[mikedev]

Many thanks for your quick response.

 

I've managed to pause the animation using the pause() feature, but struggling to envisage what would the code then look like to have it play() on hover?

 

Thanks again for your help and suggestions

[PointC]

Maybe this will help.

See the Pen NmPvpK by PointC (@PointC) on CodePen

The box is listening for a mouseenter event and then plays the timeline from the beginning. The isActive() checks if the timeline is currently playing so you don't get jumps back to the beginning on each mouseenter event. Of course, you can pause or reverse on mouseleave. It's all up to you. Make sense?

 

Happy tweening.

 

[mikedev]

All of that makes perfect sense, thank-you.

 

I like the effect there, will experiment with adding a pause on mouseleave as well, that sounds powerful.

 

Thank-you for your help!!