Unroll SVG circles, ellipses and spirals
Unroll SVG circles, ellipses or spirals with lots of complicated math. Nah. We'll cheat and use a helper line.
As the name implies, it's about motion. Specifically, web animation to get your pixels movin'. It's a collection of tutorials, tips and tricks that will hopefully help with your daily animation work.
My main focus will be real world projects. All lessons assume a basic working knowledge of HTML, CSS and JavaScript. Knowledge of SVGs and the GreenSock Animation Platform will also be super helpful.
Finally, I hope the site is a source of ideas and inspiration for you.
This isn't a place to learn basic coding. There are many wonderful sites to learn the basics. I also won't be using React, Vue, Angular or any other frameworks. All code will be written with vanilla JavaScript and I won't be animating anything with CSS keyframes.
It's also not about perfection. This website isn't perfect. I'm not perfect. You're not perfect. Well, maybe you are. I don't know you. I'm just trying to share knowledge, make some pixels move around the screen and have a bit of fun.
Unroll SVG circles, ellipses or spirals with lots of complicated math. Nah. We'll cheat and use a helper line.
You'll learn how to move your target from one item to the next with an organic feeling, stretchy-style animation.
What is GSAP? Why do you want to use it? Let's find out in this quick 5 minute tutorial.
With the aid of a helper line, you can unwrap the two sides of a SVG circle or ellipse from the center bottom position.
Learn the basic setup to animate the SVG viewBox attribute in this quick tutorial.
Using a few simple paths, you can create a neat little SVG skill level meter with multiple uses.
Setting your stroke dash length to 0 and the linecap to round produces some interesting results.
Ready to create your SVG dashed line animations? I'll show you how to create dashed path animations with the help of a mask.