Text reveal animation using GSAP + Splitting JS

[amit95]

I'm trying to create a text reveal effect which is similar to the hero section on this website.

 

I'm using Splitting.js to segment out the characters and then want to use GSAP to animate the characters up.

 

However, the animation doesn't do anything? I've tried two different approaches in my pen, but neither trigger any animation.

 

Upon inspecting my code, I can see that Splitting JS is successfully segmenting out the characters, but GSAP is doing nothing with it?

See the Pen abGpaWy by amit_rai95 (@amit_rai95) on CodePen

[Rodrigo]

Hi @amit95,

 

Unfortunately we can't give support for third party tools especially when involves going out of our way to learn a bunch of APIs. In this case GSAP has it's own tool for this: SplitText plugin.

 

On a quick inspection I recommend you to take a better look at Splitting.js API and check the result of the method you're using:

https://splitting.js.org/guide.html#splitting

 

Specially what it returns, an object with one or more arrays of the DOM elements resulting from the split, those should be able to work with GSAP, although it is highly recommended to use SplitText instead.

 

Happy Tweening!!!

[GreenSock]

It looks to me like the problem is just your selector text. There's no such thing as "hero__content h1 .char" in your file. Try just "h1 .char" and it appears to work. 👍

 

[amit95]

Ah, typo on my end, got to love them 🙃

 

But, that did the trick, many thanks!