Jump to content
Search Community

How to add an easing with svgmorph on mousemove

Citizen2718281828 test
Moderator Tag

Go to solution Solved by elegantseagulls,

Recommended Posts

I'm trying to achieve a similar effect on the main title of https://www.heights.agency/ (see the attached file). I also linked my CodePen.


The idea was to use SVGMorph with a small letter and a big letter. On mousemove, the animation should be at 1 (end of animation) when the mouse is at the middle of the letter and then goes slowly towards 0 when it's going too far. 


The only problem I am facing right now, is when the user stop moving the mouse, there should be an easing function for the animation... right now, because I'm using progress() the animation is not fluid at all.


From this point, I'm not sure where to go for that. I thought about making a new function to know when the user is not moving the mouse anymore and ease the function... but this seems way too complicated.


Any ideas?

Screen Shot 2023-01-18 at 12.23.20 PM.png

See the Pen PoBOZXP by Citizen2718281828 (@Citizen2718281828) on CodePen

Link to comment
Share on other sites

  • Solution

I think using gsap's quickTo would be a good solution here. If you look at the mouse-follow example, you could apply the 'follow easing logic' to your progress.

You can tween a timeline's progress like this: gsap.to(timeline, { progress: desiredProgressAmount })

or quickTo would look something like this:const letterScale = gsap.quickTo(timeline, "progress", {duration: 0.6, ease: "power3"})

  • Like 2
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...