Invert SVG Text With A Mask
In this quick tutorial, you'll learn how to create a neat inverted text effect using a mask or clip-path in your SVG.
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.
In this quick tutorial, you'll learn how to create a neat inverted text effect using a mask or clip-path in your SVG.
Ready to create your SVG dashed line animations? I'll show you how to create dashed path animations with the help of a mask.
In part one of this two-part tutorial, you'll create SVG open paths for an animated handwriting effect.
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.
Eliminate SVG coordinate surprises by using a background rectangle when exporting your SVGs for animation.
We'll make a gooey shape smoothly glide to a new target via a custom SVG curve for a gooey navigation.
I'll tell you about some of my favorite cool new features of GSAP 3 along with some hidden gems.