SplitText Menu

[fernandocomet]

I am trying to do a Menu with an hover and a mouse leave functionality, using also SplitText.

Works well for one item but when there are many and you move the mouse fast, it breaks

I have tried killing the tweens but not working

See the Pen jEExWGK by fernandocomet (@fernandocomet) on CodePen.

[Trapti]

Hi, 

 

I think the problem is not setting y: 0 on mouse leave event. 

 

See the Pen Eaaepaj?editors=0010 by tripti1410 (@tripti1410) on CodePen.

[mvaneijgen]

Next to that check out @Carl's amazing tutorial creating distinct enter and leave animations

 

Hope it helps and happy tweening! 

 

 

[fernandocomet]

I see, works better with one timeline 

See the Pen wBBEERG by fernandocomet (@fernandocomet) on CodePen.

 

Not sure why I don't see the titles once page is loaded

[Rodrigo]

5 hours ago, fernandocomet said:

Not sure why I don't see the titles once page is loaded

That's because you have a from instance that is rendered immediately at the start of the Timeline. Better use a to instance with advanced staggers in order to repeat each character animation, something like this:

See the Pen myyGYdy by GreenSock (@GreenSock) on CodePen.

 

Play with different values and see what cool effect you cab achieve:

https://gsap.com/resources/getting-started/Staggers#advanced-configuration

 

Great animation by the way, love to see creative folks doing their thing! 💚

 

Happy Tweening!