Jump to content
Search Community

Underline animation on gsap text animation

Yannis Haismann
Moderator Tag

Go to solution Solved by mikel,

Recommended Posts

Yannis Haismann
Posted

Hey,

 

I'm new to gsap and i need some help to do a feature.

I'm actually using the TextPlugin to anime a typing text. (See codepen tl)

But i want to do underline anime on some words of the text i anime with textplugin like in in the tl2. (codepen)

 

How can i do that ? Sorry for my english ^^'

See the Pen WNXJwZW by yannishaismann (@yannishaismann) on CodePen.

Posted

Welcome the forums @Yannis Haismann

 

I'm a little confused here. Are you trying to underline the text that is being animated, because in your demo the underline is not connected to the animated text part?

 

 

Yannis Haismann
Posted
8 hours ago, OSUblake said:

Welcome the forums @Yannis Haismann

 

I'm a little confused here. Are you trying to underline the text that is being animated, because in your demo the underline is not connected to the animated text part?

 

 

Yes i want to underline the text is already animated with TextPlugin with the same sort of animationi show you on codepen !

Posted

You need to rework your HTML and CSS, and then you should just be able to animate the width to 100%.

 

See the Pen wvPjmow by GreenSock (@GreenSock) on CodePen.

 

Yannis Haismann
Posted
2 hours ago, OSUblake said:

You need to rework your HTML and CSS, and then you should just be able to animate the width to 100%.

 

 

Thanks for your answer !
Yes, but i need to underline specific words and not the full text. But we can't add directly tag to TextPlugin that's do ugly things.

 

 

  • Solution
Posted

Hey @Yannis Haismann,

 

There is always an alternative. Here is an example with GSAP SplitText, where individual letters are animated.

This also works with single, concrete words.There is always an alternative. 

 

See the Pen MWOGqJG?editors=0010 by mikeK (@mikeK) on CodePen.

 

Happy splitting ...

Mikel

 

  • Like 2
Yannis Haismann
Posted
1 hour ago, mikel said:

Hey @Yannis Haismann,

 

There is always an alternative. Here is an example with GSAP SplitText, where individual letters are animated.

This also works with single, concrete words.There is always an alternative. 

 

 

 

 

Happy splitting ...

Mikel

 

Thanks for your answer i will try that !

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.
×
×
  • Create New...