Vishnu Manda Posted June 9, 2020 Share Posted June 9, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 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 comment Share on other sites More sharing options...
AsKadir Posted June 9, 2020 Share Posted June 9, 2020 @Vishnu Manda Hey, Vishnu! It's better to use linear gradient. You can see it here See the Pen Yzyajrr by ChicagoJostik (@ChicagoJostik) on CodePen You can easily replace css hover animation into gsap! 3 Link to comment Share on other sites More sharing options...
Vishnu Manda Posted June 10, 2020 Author Share Posted June 10, 2020 Thank you @AslanGoi Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 10, 2020 Share Posted June 10, 2020 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 comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now