Free Bonus Demo
Join over 2,500 students that are learning new ways to master GSAP each week.
The Variable Site: Complacency Curve
Today we are going to deconstruct a cool effect I saw on The Variable website.
Even if you don't know much about GSAP or SVG Animation, this video will give you a glimpse into my training style.
Most importantly you'll see how much you can do with just a basic understanding of GSAP and a few lines of code!
Video Objectives
- Copy the SVG code from the Variable site and edit in Boxy SVG.
- Morph the path with GSAP's Attribute Plugin.
- Animate a path segment with DrawSVG
Basic Demo
Be sure to mouse-over the colored hotspots to move the path segment.
Finished Demo (move mouse anywhere)
Be sure to move your mouse anywhere to move the path segment and trigger the fancy "stage" animations.
The demo above is what we build together in Creative Coding Club through a series of 6 detailed videos.
I know the code may look a little intimidating now, but don't worry, I break it all down for you!
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 250+ lessons.
New content added regularly in 2025!