[VueJS 3 with Vue-Router + Gsap cursor animation]

Hey,

 

I have a problem ! I have a custom cursor who is animated in my app. This cursor is a vue component. I use it in multiple page of my vue app. But when i switch between page without refreesh the animation of the cursor start to bug. Look like the cursor animation of the previous page is still working on the cursor component from the new page with the new animation cursor !

 

Cant share my projet but i drop here the codepen of my cursor animation.

 

Thanks for help in my new adventure with gsap 🙏

See the Pen eYeKGgw by yannishaismann (@yannishaismann) on CodePen

[Underline animation on gsap text animation]

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 !

[Underline animation on gsap text animation]

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.

 

 

[Underline animation on gsap text animation]

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 !

[Underline animation on gsap text animation]

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