Text Hover Effect

[Chelle Service Capital Inc]

Hi All, 

 

Looking to recreate this text hover effect.

 

https://patrickheng.com/

 

Is it possible with GSAP?

 

 

[GreenSock]

Sure. That site uses GSAP, but it's not as if there's a canned effect that you can apply like that - GSAP can animate any property of any object. So to achieve that effect, you'd need to wire up JS logic to get the behavior (like the mouse tracking, the way the letters kinda split into different colors overlaid on each other, etc.) and you could certainly use GSAP for any of the animations. Does that answer your question? 

[PointC]

Looks like they're using canvas for that effect. @Sahil has a nice demo and tutorial about canvas mouse follow in this thread:

You could make it happen with SVG too, but canvas would probably be a bit easier in this case. Good luck and happy tweening.

 

 

[popflier]

FYI...There is a tutorial for this exact website and text effect that you are trying to achieve in the current issue of Web Designer magazine. However, the tutorial uses JS and the Velocity.js library and not Greensock.