Free Sample Lesson
Every week Creative Coding Club members get a new lesson.
Enjoy this free sample.
I've been waiting so long to get into svg path stroke tricks and now we are finally here.
There are so many cool effects you can make by "moving dashes around a stroke" and I'm excited to walk you through them all.
Today, we're going to start with the basics so that you have an understanding of how they all work before we get into the advanced stuff.
stroke-dasharray: a string of comma-separated numbers which controls alternating lengths of dashes and gaps. The first value represents the value of the first dash and the second value is the length of the first gap. When only 1 number is present both the dashes and gaps will be the same length.
stroke-dashoffset: a number that shifts the position of the dashes. As stroke-dashoffset increases the dashes move to the left.
By animating the stroke-dashoffset value we can move the strokes around. Depending on the stroke-dasharray we can create the appearance of marching ants (below), lines drawing themselves, lines un-drawing themselves, or moving small line segments along a path (watch the end of the video for examples).
It's important to note that these css styles can be set on svg elements using inline or external css. When targeting these CSS properties with gsap they are camel-cased as strokeDasharray and strokeDashoffset.
Along the way we will build up to all these different stroke effects and more!
I've got over 30 lessons (and growing weekly) to take you from SVG basics through advanced animation effects with GreenSock.
Here are 2 more samples from the course
I guarantee that SVG Animation with GreenSock is the most up-to-date and comprehensive svg animation course on the planet.
See you in the club!
Carl
Acces over 200 premium video lessons
The video below contains a montage of just a small sampling of animations I will teach you to build.
Your Creative Coding Club membership allows you to unlock all my GreenSock courses for one low price.
I release new lessons each week to help keep your learning fresh and to make Creative Coding Club the BEST place to master GreenSock animations!