So it’s true that you can create a single awkward overshoot with cubic bezier curves, but you can’t do anything like this:

Here’s another one, from Max. Love the patterns when they layer! 💖

✨ Folks have been going through my Whimsical Animations course for a couple of weeks now, and they’re starting to share some of the stuff they’ve created. It’s *so cool* getting to see what people come up with!

For example:

I gave my blog the “Whimsical Animations” treatment, for the course launch. 😄

Rest assured, the big multiplayer rainbow will be back next week. 🌈

I share two solutions in the post:

1. Using CSS filters to do the hue rotation
2. Applying the transition to a *custom* property, leveraging CSS Houdini’s @property method.

Either way, we can fix our issue, and wind up with vibrant, continuous color animations like this:

Here’s a GIF showing one of the issues. As the particles rotate through the color wheel, they become gray in the middle. 🤔

Also: if I tried to do a full lap around the color wheel (going from 0° to 360°, for example), the color wouldn’t change at all. 🤨

Both issues share the same root cause.

✨ I’m working on the “Animation Design” bonus feature, for my upcoming animations course!

Having way too much fun with these demos. 😄

🔥 Here’s one of my favourite little details from the new site. A springy money trampoline!

🔊 Sound on for this one! I matched the underline’s spring settings to match the sound effects, so that the oscillation speed matches the boing pitch. 😄

The blog post shows you how paths work by walking through them step by step. For example, here’s how the M (Move) and L (Line) commands work:

If you’ve used vector graphics software like Illustrator/Figma, <path> is very much like the pen tool. We use it to chain a set of drawing instructions together.

They’re useful for a bunch of stuff, but I find myself using them most often to create icons that have lil’ micro-interactions: