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.
How to add an easing with svgmorph on mousemove
in GSAP
Posted
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?
See the Pen PoBOZXP by Citizen2718281828 (@Citizen2718281828) on CodePen