Jump to content
Search Community

Gsap Text Hover

Said Mounaim test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

  • Solution

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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! 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...