Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Chelle Service Capital Inc

Text Hover Effect

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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? 

  • Like 2
Link to comment
Share on other sites

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.




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

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.

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.