How to use scramble text on hover

[danosaur]

Hello dear GSAP community, 

I'm really bad at this, I was wondering if somebody knows how to proceed. I have two questions:

1. How can I start the animation only on the currently hovered item?
2. Why does the animation play when the page loads even thought it's set to paused? 

Appreciate any hint or advice! 🙏

See the Pen jOzNOJe by danielapro (@danielapro) on CodePen

[GreenSock]

Thanks for being a Club GreenSock member, @danosaur!

 

You created one big repeating timeline in which you were scrambling the text for all the elements simultaneously and you were playing that timeline on mouseover. 

 

I think you meant to do something like this: 

See the Pen WNzevxv?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Notice I'm using mouseenter and mouseleave - be very careful about mouseover and mouseout because those fire on any child elements too (usually problematic).

 

You only need to do one loop through those elements, and add the listeners in there. 

 

Does that clear things up? 

[danosaur]

Hi Jack, thanks so much! That's exactly what I was trying to achieve. Should've created the timeline inside that loop! Also thanks for explaining me mouseover/mouseout issue! Will be more careful in the future. 

Have a great Sunday!