I've decided to release both parts of this tutorial series including the finished demo. 

I encourage you to watch both videos to see the amount of detail I put into all my lessons.

Part 1: Behind the scenes of an award winning effect


This week as we will dive deep into a text effect from Marvin Shwaibold's Portfolio that I instantly fell in love with.

You wouldn't believe my shock as I discovered that it was driven by css transitions and not GSAP!

As much as I prefer to animate with GreenSock, I couldn't help but admire the work Jesper Vos put into this effect. As I dug deeper I learned quite a few things about CSS that I had never used before

As someone who grew up relying on "view source" to study html markup and steal some javascript for opening pop-ups, I couldn't help but appreciate how powerful and helpful our modern browsers' developer tools are. It's amazing what you can still learn by digging behind the scenes of a live site.

While watching this video I'm hoping that in addition to picking up some of the same CSS tricks I stumbled into you also gain an appreciation for how I learn. You'd be astonished by what I don't know but digging into dev tools is one of my favorite ways of picking up new tricks. 

Had I not done this exploration I definitely would not have been able to create such an elegant solution with just  2 lines of GSAP.

It's important that you pay attention to this overview because next time I'm diving right into the code with the expectation that you have this video as background.

Part 2: Building the Effect

Watch as I explain each line of code as we bring this fantastic effect to life


Once you've watched the videos, the best thing to do is try to code the solution yourself using this basic starter file


Finished Demo



Special shout out to Jhey (Whimsy Dev Supreme) who helped me with getting the overflow:hidden of the parent h1 closer to the text as explained in my desperate plea.

I'll be posting the solution here on this free sample page shortly, but want to give folks a chance to give it shot.


Amazing Folks to Follow

It was really cool to learn that the site had a motion designer that designed the animation and someone to code it. I think it's far too easy for us to see amazing sites like this and feel bad that we can't build all this stuff on our own. 

Please be sure to check out the work of everyone involved and support them on twitter.


Go Deeper with GreenSock


If you would love to have new web animation lessons and challenges sent to your inbox each week AND also instantly unlock over 130 lessons for all skill levels  check out my  Creative Coding Club course bundle.

You can even enroll in my beginner's course GSAP 3 Express for Free! 

I absolutely guarantee you're going to love it. 

Join Creative Coding Club

Unlock the world's most comprehensive GreenSock Animation training.

Get started now