How to animate every word in sentence?

[Exhumator 7 Likes (Newbie)]

Hello, I am trying to animate every single word in a sentence, lets say we have following div:

 

<div id="words">I am the best</div>

 

and now we want to animate every single word ("I", "am", "the" and "best") animate in custom way. Lets say we want:

 

• "I" to fly in from the left
• "am" to fly in from the top
• "the" to fly in from the right
• "best" to fly in from the bottom

 

What's the best way of doing it? Do I really need to create every single DIV before the animation?

[mikel 4,774 Likes (Superhero)]

Hi @Exhumator,

 

Like Frank Sinatra: Go ahead and do it your way. Just a small codePen.

Then let's see what would be to optimize ...

 

Kind regards

Mikel

 

[elegantseagulls 1,409 Likes (Superhero)]

@Exhumator GSAP has a utility for that : https://greensock.com/docs/Utilities/SplitText

[PointC 14,182 Likes (Superhero)]

Yep, the SplitText plugin would make that super easy. 

 

See the Pen ZNbmZO by PointC (@PointC) on CodePen

 

All of the Club GreenSock plugins are huge time savers and a ton of fun. I highly recommend a membership.

 

More info about joining the club:

https://greensock.com/club

 

 

 

[Exhumator 7 Likes (Newbie)]

Fantastic. Thank you for your time and effort.