ScrollTrigger Multi-Colored Line Indicators

This sample lesson is a GREAT example of the type of lesson I deliver weekly to my Creative Coding Club students.

Even if you don't know much about GSAP or ScrollTrigger, this lesson will give you a glimpse into my training style and the level of detail I put into each video.

I hope you watch the whole video and get inspired to use this effect in your own projects!


Today we are going to deconstruct a cool effect i saw on this Vega WebFlow Template.

We'll dig behind the scenes to get a sense of how it's built and then build it up from a very basic starter file.

Along the way you'll see that some of my initial presumptions about how to build it were incorrect.

I decided to show you all my steps because I want you to see that in order to figure these things out, we all have to start somewhere and learn along the way.

Be sure to watch the whole video and see if you can guess where I went wrong OR maybe you can try your own solution.


Finished Demo

Here are a few of my variations along the way


Ready to learn more about GSAP?

Great! I'm happy to teach you!

I worked at GreenSock for 7 years creating loads of videos for their website, documentation and official training.

Over the past decade, I've answered thousands of questions in the GreenSock forums and continue to share my knowledge of GSAP wherever I can.

The Creative Coding Club is my way of archiving everything I know about GSAP, ScrollTrigger and SVG Animation so that thousands of students from all over the world can discover the joy of animating with code.

Whether you are new to front-end development or are a seasoned pro, I'm sure you will learn a ton as you go through the 245+ lessons in my course bundle while getting new lessons delivered weekly.


Discover the Joy of Animating with Code

Unlock the world's most comprehensive GreenSock Animation training.