Whimsical Animations

Part IParticle Effects

Particle effects are like a cheat code. They add so much charm to our products, and you don’t need to be an expert designer in order to make effects that feel lush and polished. ✨

In the first part of this course, you’ll learn how to create dynamic, procedural particle effects like this:

(TapClick the heart to generate some particles!)

I love particle effects, but this module is about so much more. I’ll show you a dozen core techniques I use in just about every animation/interaction I create.

To truly create next-level animations, we’ll need to go far beyond basic CSS transitions, borrowing techniques from game development and graphics programming. I’ll show you how to use things like linear interpolation and trigonometry to unlock new capabilities, and share the tricks I’ve come up with on my own over almost two decades of experience, things I’ve never seen anyone else talk about. 😮

We’ll also look at:

• Evaluating the performance of our animations, and how to diagnose/fix framerate issues.

• Building accessible experiences that don’t trigger motion sensitivities, while still building top-tier experiences for everyone.

• The little details that take basic animations to the next level.

• How to port our vanilla CSS/JS particle implementation to component-based frameworks like React.

Part 2The Magic of SVG

SVG is such a cool technology. It’s like an alternate-reality version of HTML, but focused on illustration instead of documentation. SVGs are first-class citizens in the DOM, which means we can select and modify individual shapes using JavaScript and CSS!

One of my favourite things to do with SVG is to create animated icons with micro-interactions, like these:

I’ll show you everything you need to know to build these sorts of effects, but that’s really only the tip of the iceberg. You’ll also learn how to create:

• using SVG strokes.

  There are a bunch of examples of this on this page!

• Lovely data visualizations without any graphing libraries.

• Big, splashy “tech startup” effects, as seen on landing pages from companies like Stripe and Vercel.

• Ridiculously smooth motion using spring physics.

In addition to the vanilla CSS/JS we use throughout this course, I’ll also show you how to use SVG in a React context, using my two favourite React animation libraries.

Part 3Advanced Interactions

My blog features a “Like” button that keeps a close eye on the user’s cursor. 👀

Instead of a typical :hover state, we track the user’s mouse position and compare it to the icon’s on-screen position. The heart tilts towards the cursor while the eyes slide over, as though it was curious about our cursor. This is the sort of advanced interaction that we cover in this part of the course. ✨

This sort of pattern isn’t just useful for googly-eyed personified icons. We can do all sorts of cool stuff in response to user input, based on their cursor position, scroll position, press duration, and more. There are several examples on this very page!

In this part of the course, we cover:

• How to add

  dynamic cursor interactions

  with getBoundingClientRect.

• How to respond to scroll events using modern CSS and JS (Scrollytelling!).

• Animating on route change with the

  View Transitions API.

This part of the course is also jam packed full of neat tricks. I’ve figured out a lot of cool interaction techniques throughout my career, and I’m assembling them all here! It’s a treasure trove of novel mechanisms you can start using in your own work.

Part 4Working with HTML Canvas

On my blog’s homepage (opens in new tab), I have this big interactive rainbow:

For stuff like this, SVG isn’t quite up to the task; there are too many things moving at the same time. This is a job for .

Canvas is a great tool for maximalist, over-the-top animations with hundreds of moving parts. Instead of npm installing the same boring confetti effect that everyone else uses, I’ll show you how we can create your own totally unique celebratory effects, from interactive rainbows to procedural fireworks and beyond.

We’ll also cover:

• When to use Canvas and when to use SVG.

• How to optimize performance with Web Workers and OffscreenCanvas.

• The magic of immediate mode rendering and the cool tricks we can do as a result.

• Using physics libraries to make our animations feel organic and tactile.

• How to use and Perlin noise to enhance our animations.

BonusAnimation Design

Learning how to implement animations is only half of the battle. Unless you have the rare privilege of working with a motion designer, you also need to know how to design animations.

We cover animation design principles throughout the main course, but in this special bonus module, we go even deeper. I’ll show you how I come up with animation concepts from scratch, and teach you the principles I follow to make sure that my animations feel good.

With great power comes great responsibility. I share a ton of animation techniques in this course, and in this bonus module, I’ll show you how to avoid making obnoxious animations that annoy the end user.

We’ll also cover a bunch of other stuff, including:

• How to create swoops and abstract shapes in vector design software.

• How to orchestrate animations so that they make sense in sequence.

• Advanced animation design concepts, like animating based on the user’s action rather than the current state.

BonusAnimation Challenges

In addition to the dozens of exercises scattered throughout the course, this special bonus module includes a bunch of extra challenges. I’ll show you a clip of a super-cool animation, and your job is to use the concepts taught in the course to build it!

For example: using the particle skills you learned in Part 1 of the course, you’ll be asked to implement this Kirby-inspired particle effect:

Each challenge includes my own solution, so you can see exactly how I’d do it and compare it to your own approach. Some of the challenges will be open-ended, with an emphasis on curiosity and experimentation!

Becoming truly proficient at animation requires a lot of practice, and my goal with this course is to provide a ton of practice opportunities. ✨