Jump to content
Search Community

Wavy Text

ektorp test
Moderator Tag

Go to solution Solved by ektorp,

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 am trying to create a wavy text effect using SplitText and Timeline staggers. Below is what I have so far but it isn't exactly giving me the result I need. You can see the whole thing does stagger a wavy text effect but I need the animation effect to be more fluid. Basically, every letter should be moving at all times and each next letter would would be slightly staggered to give a continuous looping wavy text effect.


If it were just a column of divs it would be a bit more simple but the text is dynamic and I am trying to make use of SplitText and staggered timelines to get the results I need. Any help would be greatly appreciated.


See the Pen 5ad75a2ffc8761a98b197af766b51e66 by bdang (@bdang) on CodePen


See the Pen YWAWOo by bdang (@bdang) on CodePen

Link to comment
Share on other sites

I would just play with the timing and the y positions until you get an effect you're happy with.


I can't seem to fork your pen, but something like this looks a bit smoother to me:

tl.staggerFromTo(header.chars, 2,
 , .03);

and you could also play with different eases like Elastic, Bounce, and Back for some nice fluid motion: http://greensock.com/ease-visualizer

  • Like 1
Link to comment
Share on other sites

Thank you ohem for your response. Yes, I see how playing with the timing and eases produces different effects but it is still not the result I am looking for. The whole timeline plays through each character one at a time and when the timeline ends the whole timeline and each character repeats itself. What I need is for each character to always be animating. Currently, regardless of the timing or ease setting, each character plays and then stops, and then doesn't start again until the whole timeline completes and restarts itself. For what I need, each character should never stop. They will be continuously animating vertically with each next character staggering in which should create a fluid wavy text animation. I hope this helps with explaining the effect I need. Thanks again ohem for your response.

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