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
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
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.
- Marvin Shwaibold Portfolio
- Marvin Shwaibold on Twitter
- Motion Designer Yael Bienenstock on Twitter
- Developer Jesper Vos 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 140 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.