Whimsical Animations

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

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! ✨

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.

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.

https://anonymz.com/?https://whimsy.joshwcomeau.com/