Text or Heading Animation

[KinForce]

Hi All,

I am new to GSAP.
How do we create a text / heading animation like https://tobiasahlin.com/moving-letters/#2

[Rodrigo]

Hi @KinForce and welcome to the GreenSock forums!

 

What you're looking for is the SplitText Plugin:

 

Here just a couple of examples:

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

 

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

 

The SplitText Plugin is a benefit for Club GreenSock members, but you can play with it (and every GSAP Bonus Plugin) by forking this codepen:

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

 

Hopefully this helps.

Happy Tweening!

[KinForce]

@Rodrigo
Thank you.

[KinForce]

Here is my codepen

See the Pen dyQvgjw by gogul357 (@gogul357) on CodePen

 

And I'm try to recreate the below animation

https://tobiasahlin.com/moving-letters/#2

 

[mvaneijgen]

@KinForce Looks good! You could look in to adding some fancy eases to the stagger, but to me this looks like the same animation. Was there any question you were having? Check out this tutorial by our own @Carl Hope it helps and happy tweening! 

 

 

[KinForce]

@mvaneijgen 
Thanks for your response. But animation not look like same.I will explain here,
In my code pen, while playing or replaying the gsap animation - all chars are scaling due to stagger. But in the given sample each letter scales one after other only.

 

I have tried to create separate tween for each chars through looping but it looks ugly.

 

[mvaneijgen]

just change the stagger duration. You had set it to something really small 0.02, you increase it to something more it will increase the duration. I've set it to something really big, but you can play with this value. And still check the video above you can even go more fancy with eases and staggers

 

See the Pen poQeGZR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen