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.
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.
With the aid of a helper line, you can unwrap the two sides of a SVG circle or ellipse from the center bottom position.
I'll tell you about some of my favorite cool new features of GSAP 3 along with some hidden gems.
Dynamically build a SVG wavy gauge with jumping numbers and link the time to a draggable element.
Handwriting part 2. You have paths so let's create animated writing with GreenSock's DrawSVG plugin.
You'll learn how to move your target from one item to the next with an organic feeling, stretchy-style animation.
Learn the basics about GreenSock's MotionPath plugin with a piggy bank and some flying dollars.
Learn how to use a circular mask and a text element counter to create a retro-style SVG movie countdown animation.
Spice up your next burger button with some animated handwriting and fluid line transformations.