Animating A word In a phrase using gsap

[Hadeel]

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.

[mvaneijgen]

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 

 

 

 

 

[Hadeel]

Thanks a lot this worked!

[destroksie]

When trying to make an endless loop with const tl = gsap.timeline({ repeat: -1 }); we have a problem with the latest animation that ends in empty/pause before restarting, any solutions for this ?

[GreenSock]

1 hour ago, destroksie said:

When trying to make an endless loop with const tl = gsap.timeline({ repeat: -1 }); we have a problem with the latest animation that ends in empty/pause before restarting, any solutions for this ?

@destroksie if you'd like some help, please start a new thread and make sure you include a minimal demo (like a CodePen or Stackblitz). 

[Arthur J]

Hello, I am trying to do the same animation in webflow and can't find anything about it... Could someone help me? 

[Rodrigo]

Hi @Arthur J and welcome to the GSAP Forums!

 

The best place to start is the Installation section of our Learning Center, more specifically the Webflow part:

https://gsap.com/resources/Webflow

 

Just in case here is a simple demo:

https://preview.webflow.com/preview/word-loop-width?utm_medium=preview_link&utm_source=designer&utm_content=word-loop-width&preview=35c04d74b129a97ee6f8a11d1c221126&workflow=preview

Here is the live preview:

https://word-loop-width.webflow.io/

 

Here is the codepen it's based on:

See the Pen jOgYqwW by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!