Basic SVG viewBox animation
Learn the basic setup to animate the SVG viewBox attribute in this quick tutorial.
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.
Learn the basic setup to animate the SVG viewBox attribute in this quick tutorial.
Unroll SVG circles, ellipses or spirals with lots of complicated math. Nah. We'll cheat and use a helper line.
Confused by SVG masks and clipPaths? In this quick tip, I'll explain the differences.
Learn how to use a circular mask and a text element counter to create a retro-style SVG movie countdown animation.
Eliminate SVG coordinate surprises by using a background rectangle when exporting your SVGs for animation.
If you'd like a quick and easy before and after SVG slider, you can make one with a SVG and clipPath.
In this quick tutorial, you'll learn how to create a neat inverted text effect using a mask or clip-path in your SVG.
Using a few simple paths, you can create a neat little SVG skill level meter with multiple uses.