This lesson pulls together a lot of techniques we've learned in GSAP 3 Express (FREE) and Beyond the Basics. 

It's very common and natural for beginners to write a bit more code than necessary.

Today we're going to take 5 timelines and condense them down to a single tween!


Original Code


Challenge

Try to reduce the code on your own before watching the video or looking at my solution or reading any further. Can you get it down to 2 or 1 timelines? How about a single tween?



Ok, done trying? Then you can proceed ;)


We all start this way

Although you may scoff at that wall of code, it does come from an actual GSAP learner who had asked about how to reduce the code.  I was glad to see this person was not only putting in the effort to learn GSAP by writing their own code but also had the courage to ask for help.

It was actually a great exercise for me to work through a few different approaches and now you get to benefit too!

To be honest, my solution involves something I've never used before... The keyframes "object" syntax that has been in GSAP since version 3. I was excited to stumble into to this solution and I'm hoping you are as thrilled with it as I am :)

Along the way to refactoring we'll discuss

  • a logical progression to 1 timeline
  • using gsap.defaults() and smart css selectors to streamline the html, css and js.
  • nesting timelines
  • my elegant single-tween solution


Single Tween Solution (no peeking)

So hopefully you can again see the power of the keyframe syntax. I've got loads of demos and resources for you to look at relating to everything I covered in the video.


Additional Resources


Hopefully this lessons helps you see that the value of a Creative Coding Club membership is not just in building a single cool project or learning about a particular tool. 

It's in having the chance to learn time-saving techniques and have access to a vast library of lessons that support each other and loads of outside resources.

Go Deeper with GreenSock


Get instant access to over 140 GreenSock lessons to help you become a better creative coder and create super-slick animations.

Learn More About Creative Coding Club