Read time: 2-3 minutes
15
Jun
2020
Use a background rectangle with SVG exports
Eliminate SVG coordinate surprises by using a background rectangle when exporting your SVGs for animation.
What this site is
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.
What this site isn't
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.
random picks
Read time: 4-6 minutes
12
Jun
2020
Better SVG exports make your animations easier
Animation is much easier with better prep work. In this quick tip, I'll show you my export settings for Adobe Illustrator.
Read time: 3-4 minutes
16
Jun
2020
Cut your path start points in Adobe Illustrator
Control the start point of your DrawSVG and MorphSVG animations by cutting and rejoining your paths in Adobe Illustrator.
Read time: 6-7 minutes
21
Jun
2020
Hamburger button with handwriting
Spice up your next burger button with some animated handwriting and fluid line transformations.
Read time: 6-8 minutes
3
Jul
2020
Unfold SVG shapes and lines
You can unfold most any SVG shape with a helper line. Squares, triangles, hexagons? Yep. It's easier than you think.
Read time: 6-8 minutes
2
Jul
2020
Unwrap SVG circles and ellipses
With the aid of a helper line, you can unwrap the two sides of a SVG circle or ellipse from the center bottom position.
Read time: 3-4 minutes
26
Jun
2020
Organic Morphing: Getting needed points from Adobe Illustrator
Learn how to get the correct path points out of Adobe Illustrator for smooth organic SVG morphing.
Read time: 7-9 minutes
4
Aug
2020
SVG Calligraphy Handwriting Animation
SVG calligraphy can be tricky with varying width strokes and text overlapping itself. Learn how to do it with multiple masks.
