clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason. It’s a little intimidating in the sense that it feels like math class because it requires working with geometric shapes, each with different values that draw certain shapes in certain ways.
We’re going to dive right into
clip-path in this article, specifically looking at how we can use it to create pretty complex animations. I hope you’ll see just … Read article
I came across this neat little animation in a designer newsletter.
Unfortunately, I lost track of the source, so please give a shout out if you recognize it!.
In it, a block of text appears to bleed into view with a swirl of colors, then goes out the same way it came in. It's a slick effect and one I wanted to recreate in code.… Read article
I came across this amazing Dribbble shot by Jakub Reis a while back. It caught my eye and I knew that I just had to try recreating it in code. At that moment, I didn’t know how. I tried out a bunch of different things, and about a year later, I finally managed to make this demo.
I learned a couple of things along the way, so let me take you on a little journey of what I did … Read article
When Chris first started the CSS-Tricks redesign, he came to me with some screenshots of the direction it was headed in, and suggested that I make an animation for the logo as part of the design refresh. I was excited about this project, and my mind immediately started to shuffle through possible animation and interaction.
Even though animating SVG with CSS might be more comfortable for the average front-end person, SVG has another way do animation built right into the SVG syntax itself. This is exactly what we cover in brief in this video, but if you want a complete reference guide definitely check out A Guide to SVG Animations (SMIL) by Sara Soueidan right here on CSS-Tricks.
SMIL stands for Synchronized Multimedia Integration Language. As I understand it, that is a "thing" all unto … Read article