Jump to content
Search Community

Collection of text effects based on GSAP SplitText?

superasn test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm amazed with the SplitText library and I was wondering if there is a collection of already made text effects I can use with it?

 

I mean like http://textillate.js.org/ (which is based on animate.css) and offers inbuilt effects like swing, wobble, tada, etc.. Is there something for SplitText too?

 

I know I can write them myself but I'll never be able to create something professional like the demo animations or the textillate type animations.

 

I've tried codepen, github, codecanyon, etc but couldn't find anything..

 

Anyone know if something like this exists?

 

Cheers!

San

Link to comment
Share on other sites

Hello @superasn and Welcome to the GreenSock Forum!

 

SplitText only splits up your text into lines, words, or letters. Then you animate those split text elements the way you want.

 

In GSAP those type of preset effects are done with easing, specifically with GSAP CustomEase.

 

CustomEase: https://greensock.com/docs/Easing/CustomEase

 

You can see here in the below codepen examples of those easing presets, for example in CustomWiggle.

 

See the Pen LRqkOr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Check out the Easing Docs on it

Also check out this video tut on how to use it

 

 

Happy Tweening! :)

 

  • Like 3
Link to comment
Share on other sites

Hello Jonathan,

 

Thanks so much for the reply.

 

I wish there were some ready made text effects to plug and play. So far I've managed to find about 12 examples of text effects using SplitText on codepen so at least I have a starting point now. 

 

Also thanks for the resources. I'll learn more to see if I'm able to create my own text effects using these easing libs.

 

Regards,

San

  • Like 2
Link to comment
Share on other sites

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...