Gsap Text Hover

[Said Mounaim]

Hello All,

I need help on Gsap, if you see the link of codepen theres a hover on text,
I want something like on this Site on the last section

https://dimitriossykovaris.netlify.app/about

 

Hover on the mail u will see the hover

Thanks,

 

See the Pen qBQayor by Apiiya (@Apiiya) on CodePen

[mvaneijgen]

Hey @Said Mounaim

 

I've turned the logic around and I think it is a much easier way of going about it.

 

The power of GSAP lies in creating animations and then controlling these animations with tools like ScrollTrigger or for you on mouse movement, but starting with the animation is key! Below here I've a pen with an tween that moves all the letters up and down with a custom ease, which looks like a bell curve, this looks like the animation you want right? Feel free to tweak it.

 

 

See the Pen qBQaMax?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

Then instead of hovering each letter, I check for mouse movement on the h1 and map the mouse position between 0 and 1 on the x axis. A GSAP timeline has a progress() function that takes a value between 0 and 1 where 0 is the start of the animation and 1 the end of the animation, so in the mouse move function, if I do tl.progress(mappedValue); it will set the timeline to that point based on the mouse position. Hope it helps and happy tweening! 

 

See the Pen poQEOEy?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Said Mounaim]

Thankssssss! 
is there any solution for "mouseleave" ?

[mvaneijgen]

Ha good one! If you're up for the challenge I would advise you to take a stab at it your self! The best way to learn is to get your hands dirty! 

 

I would look in to the tl.tweenTo() function https://greensock.com/docs/v3/GSAP/Timeline/tweenTo() in a "mouseleave" function 

 

If you're stuck just post back here with the demo you've tried to get working. I came up with the following, but really before looking try see what you can do on your own, maybe you have an even better solution!