Skip to main content
CSS is fun and cool and I like it.
Article

Lessons Learned from Sixty Days of Re-Animating Zombies with Hand-Coded CSS

I’ll be linking to individual Pens as I discuss the lessons I learned, but if you’d like to get a sense of the entire project, check out 60 days of Animation on Undead Institute. I started this project to end on August 1st, 2020, coinciding with the publication of a book I wrote featuring CSS animation, humor, and zombies — because, obviously, zombies will destroy the world if you don’t brandish your web skills and stop the apocalypse. Nothing puts the hurt on the horde like a HTML element on the move!
Article

How to Get Handwriting Animation With Irregular SVG Strokes

I wanted to do a handwriting animation for calligraphy fonts — the kind where the words animate like they are being written by an invisible pen. Because calligraphy fonts have uneven stroke widths (they actually aren’t even strokes in terms of SVG), it was near impossible to do this sort of thing with typical path animation techniques. But I found an innovative application of SVG masking to achieve this affect in matter of minutes. … Read article “How to Get Handwriting Animation With Irregular SVG Strokes”

Article

The Making of: Netlify’s Million Devs SVG Animation Site

The following article captures the process of building the Million Developers microsite for Netlify. This project was built by a few folks and we’ve captured some parts of the process of building it here- focusing mainly on the animation aspects, in case any are helpful to others building similar experiences.

Building a Vue App out of an SVG

The beauty of SVG is you can think of it, and the coordinate system, … Read article “The Making of: Netlify’s Million Devs SVG Animation Site”

Link

Making lil’ me

Link

Line-Animated Hamburger Menu

Article

Use and Reuse Everything in SVG… Even Animations!

If you are familiar with SVG and CSS animations and started to work with them often, here are some ideas you might want to keep in mind before jumping into the job. This article will be about learning how to build and optimize your code with <use> element, CSS Variables and CSS animations.

Live DemoRead article “Use and Reuse Everything in SVG… Even Animations!”
Article

Animate Text on Scroll

We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo.… Read article “Animate Text on Scroll”

Article

Digging Into the Preview Loading Animation in WordPress

WordPress shipped the Block Editor (aka Gutenberg) back in version 5.0 and with it came a snazzy new post preview screen that shows the WordPress logo drawing itself while the preview loads.… Read article “Digging Into the Preview Loading Animation in WordPress”

Article

Animating with Clip-Path

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 “Animating with Clip-Path”

Article

Animate a Blob of Text with SVG and Text Clipping

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! It’s by Martí Fenosa.

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 “Animate a Blob of Text with SVG and Text Clipping”