Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vishnu Manda

Text animation on hover

Recommended Posts

I'm trying to create an effect, but i don't know where to start.

Before hover text in white color,  After hover into Text color will be change White to Green with animation like a slide left to right 

text-hover-effect.png

Link to post
Share on other sites

On mobile so I can't show a demo, but you can create this sort of thing by layering two versions of the text with the green version on top. 

 

In the top version, you could either animate a clip path or the width of a parent element with overflow: hidden. Same basic approach is true if you're using SVG.

Link to post
Share on other sites

Note that -webkit-background-clip: text; doesn't have the best support. Depending on your needs you may need to use one of the methods I outlined instead.

Link to post
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.

×