Fade up character animation on text in svg

[Aamir Khan]

Hi,

I am new to gsap.

 

I want to apply fade up character animation on the text in the svg like it is animating in this (

See the Pen bGqrJGN by snorkltv (@snorkltv) on CodePen

) example. but I want to select my text in my svg using id of the text element. Please help

See the Pen WNKjyQP by khanaamir (@khanaamir) on CodePen

[mvaneijgen]

You can't use SplitText with SVG <text> elements, see topic

 

From the docs page https://greensock.com/docs/v3/Plugins/SplitText

• SplitText is not designed to work with SVG <text> nodes.

So you either have to manually split your <text> element in your SVG (not recommend, this is a lot of manual work and you can't edit the text afterwards). Or use a normal HTML text element and overlay it on your SVG (this needs to be manually positioned, but then you can use SplitText), I would go that route if you can. Working with text in an SVG is never fun.

 

 

[Rodrigo]

Hi,

 

You can still use the TextPlugin in order to create some type of animation with SVG Text:

 

Here is a live example:

See the Pen RwBwJBm by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!