Whimsical Animations

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!

Here are some parts of the course

Part I: Particle Effects – dynamic procedural particle effects, fundamental techniques, performance debugging, interaction with React
Part II: The Magic of SVG – how to work with SVG: individual shapes, lines, visualizations, spring effects, and integration with React
Part III: Advanced Interactions – Coming Soon! – more complex interactions: mouse reactions, parallaxes, route changes, etc.
Part IV: Working with HTML Canvas – Coming Soon! – when to use Canvas instead of SVG, performance, physics, noise, and visual effects
Bonus: Animation Design – animation design principles: from idea to sequence, how not to annoy the user
Bonus: Animation Challenges – additional tasks: recreating effects and comparing them with my solutions