This video and demo show how to take words from an array, create individual divs for each one and animate them.

Explore the demo

Be sure to click on “edit on codepen” to play with the code. Change the text and try to edit the animation effect.

Hopefully you learned something from this video and you can get some mileage out the demo. In addition to providing free tutorials like this, I also have a Creative Coding Club which is packed with hours of GSAP 3 training videos and demos. If you like this format of short video + demo you’ll really dig it.

Bonus Lesson for Creative Coding Club Members

The interactive version (click for next phrase) of this effect and video overview are now available in my mega-course Bonuses, B-Sides, and Oddities.

Save $50 on Creative Coding Club: Today ONLY

Unlock all of my GreenSock animation courses and start your journey to master GSAP 3. Through over 17 hours of premium video tutorials I’ll guide you from beginner to pro.

I’ve been teaching front end developers how to animate with code for over a decade.

Stop getting frustrated and spending hours searching through support forums.

I know all the mistakes beginners make and how daunting an API like GSAP can seem at the start.

My courses are specifically designed to teach you the most important parts of GreenSock through small, isolated projects that illustrate the techniques that will make building scripted animations fun.

Join today and save $50 with code: flexbox

Start your Lifetime Creative Coding Club Membership