Josh W. Comeau – Whimsical Animations

Here’s What You Get:

Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas.

I’m sharing all my tricks in this one!

Creating top-tier web animations is not easynot easy.

I remember being frustrated by this. I would see these incredible animations online that seemed like magicmagic. They were so far beyond the basic CSS transitions I understood. I didn’t even know where to start.

Over the course of many years, I built the missing skills I needed, piece by piece. I learned how to use SVG and Canvas to create dynamic illustrations not otherwise possible with HTML. I figured out the dozens of niche techniques needed to do the really cool stuff. And I learned how to design animations and interactions so that they actually improve the user experience.

And now, I want to teach you how to do all of that stuff too.

Whimsical Animations is an interactive online course. It’s not a typical video course; you’ll build practical skills by experimenting, solving problems, and creating your own delightful animations. It’s not like any other course you’ve taken before (unless you’ve taken one of my other courses, in which case, it’s the same sort of deal).

Animations are surprisingly importantsurprisingly important. It may seem a bit superfluous, but there’s a reason why companies like Apple and Stripe put so much effort into this stuff. In this course, I’ll teach you a set of skills that very few web developers have and that tons of companies need.

If you’ve ever wondered how I built something, there’s a very good chance we cover it in this course. I’ve picked up so many spectacular tricks and powerful techniques over the years, and I can’t wait to share them with you!

Part 1

Particle 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:

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 2

The 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:

(Click each icon to view the effect.)

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:

• Creative line effects 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 3

Advanced 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!).
• Incredible layout animations with the View Transition 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 4

Working with HTML Canvas

A few years ago, when I built the onboarding flow for my course platform, I created a procedural fireworks effect:

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 HTML Canvas.

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 procedural celebratory effects.

We’ll also cover:

• Modeling our animations after the real world, using physics concepts like gravity and air resistance.
• 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.
• How to use randomness and Perlin/simplex noise to enhance our animations.

Bonus:

Animation 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.

Bonus:

Animation 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.

Bonus:

Layout Animations in React

In my other course, The Joy of React (opens in new tab), we explore how to create incredible layout animations using the Motion library (formerly Framer Motion). The main curriculum digs into layout animations using the View Transitions API, but there are still some situations where the Motion library provides a better user experience. And so, as a little bonus for React devs, I’ve ported over this module into this course!