Jump to content
Search Community

Animating A word In a phrase using gsap

Hadeel test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi Everyone,


I am trying to use gsap to change a word in a phrase to show other words after one another, like in this example: 

See the Pen YzxmMrz by pokecoder (@pokecoder) on CodePen


1) The code I have now allows me to change it once, how can I add more words to change? 
2) How can create a smoother transition/animation when the word changes, like sliding up or down for example? 

Thanks in advance for you support!

See the Pen XWyRzzP by Hadeel-Gamal (@Hadeel-Gamal) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Hadeel I would create all the words already in your HTML, then style them with CSS where you want them to go to and then start animating them from where ever you want. Keep in mind that the words are not the same length, so you have to design something that that doesn't matter, if you do not and you want the text to be always in line with the rest of the text the "OOH" will jump all over the place, which in my opinion would not be a nice animation. Hope it helps and happy tweening! 


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


Check out @Carl's tutorial how to create seamless loops with staggers 





  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

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