Thebasic Package
Get started building lovely particle effects.
$299
Register Now
Price shown in USD, excluding sales tax.
- Includes Part 1
- Exclusive Discord community
- 30-day money-back guarantee
Includes
- 1 Particle Effects
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!
Registration is now open! Join now and learn how to create world-class animations. ✨
Already registered? Log in here .
Creating top-tier web animations is not easy.
I remember being frustrated by this. I would see these incredible animations online that seemed like . 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 the user experience.
And now, I want to teach you how to do all of that stuff too. 😄
Whimsical Animations is an 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! ✨
This course is incredible. We’ve all learned from Josh’s beautiful interactive blog posts with his clear and fun writing style (he’s like that professor you liked in college, equal parts smart and endearing), and this is a full curriculum, with Josh walking you through the most important aspects on video.
I’m marveling at what a perfect and practical explanation it all is. You’re definitely going to level yourself up here.
Animations can make or break a user's experience with a site or app, and Josh gets that on a deeper level than anyone I've come across. This course goes beyond the technical how-tos, drawing on Josh's years of real-world experience to teach you not only how to build animations but also to give you tips and tricks to develop the instincts you'll need to make any animation come alive.
Josh’s courses have helped developers from
The
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:
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 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 4Working 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 .
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 and Perlin/simplex 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. ✨
I didn’t quite finish this module in time for the launch, but I expect it to be published within the next few weeks, sometime in May or June. Registered students will receive an email as soon as it’s available.
Whimsical Animations provides practical lessons from the very beginning. I quickly found myself picking up CSS and SVG techniques that I could immediately apply to my work in unexpected ways! Not only am I able to confidently create more whimsical UIs, but I’ve also become much better at debugging and writing CSS in my day-to-day work projects.
The course itself embodies the very whimsy it teaches, making the entire experience incredibly fun and engaging. Highly recommend!
Josh is one of those rare people who is a world-class expert at two very different things: the craft itself, and teaching it. Not only does Josh know the technology inside and out, but he is a tremendously gifted teacher. Sure, this course is rigorous and comprehensive, but above all it's FREAKING FUN. So go learn from the expert and have a blast in the process.
Register Now!
Join developers who have learned how to create next-level whimsical animations and interactions with this course.
A magical journey begins today. ✨
TheUltimate Package
Learn how to design and build mind-blowing animations from the ground up. Become an animation wizard. 🔥
$
Price shown in USD, excluding sales tax.
- Includes all content and bonuses
- Exclusive Discord community
- 30-day money-back guarantee
- Certificate of Completion
Includes
- 1 Particle Effects
- 2 The Magic of SVG
- B Bonus: Animation Design
- 3 Advanced Interactions
- 4 Working with HTML Canvas
- B Bonus: Animation Challenges Coming soon!
Thepro Package
Develop cool animations and interactions with HTML and SVG.
$449
Register Now
Price shown in USD, excluding sales tax.
- Includes Parts 1 and 2
- Exclusive Discord community
- 30-day money-back guarantee
Includes
- 1 Particle Effects
- 2 The Magic of SVG
- B Bonus: Animation Design
Level up the whole team ✨
Train the whole front-end team with our team licenses! Receive up to a 20% discount, depending on the number of seats.
Hi, I'm Josh!
I’ve spent my career working as a software engineer at organizations like Khan Academy, DigitalOcean, Unsplash, and many others. I also spent years teaching web development fundamentals at Concordia University, here in Montreal. In 2020, I left my job as a Staff Software Engineer to focus on developer education full-time.
This is my third course, after CSS for JavaScript Developers (opens in new tab) and The Joy of React (opens in new tab). I’m proud of both of those courses, but this one is really special. This is the course I’ve been waiting to make. ✨
In Whimsical Animations, I’m opening up my war chest and sharing all of the tricks and techniques I’ve built over nearly two decades of building websites and web applications. This stuff isn’t part of the typical front-end developer’s toolkit, and you won’t find in any other course.
Here are some fun facts about me:
- I'm the creator of a popular animation library, react-flip-move (opens in new tab). The package is downloaded ~500,000 times a month from NPM. It was originally released all the way back in 2016!
- I've spoken at several web development conferences! For example, check out my 2024 SmashingConf NY talk, The Secret Mechanisms of CSS (opens in new tab).
- I teach front-end development skills to over a million developers per year on my blog, joshwcomeau.com (opens in new tab).
- I’ve released a number of very whimsical side projects, including a generative art tool (opens in new tab) and an explorable explanation about sound (opens in new tab).
I’ve been obsessed with creative web animations since I started tinkering with web development back in 2007. I’m so excited to finally be sharing how all this stuff works with you!
Josh W. Comeau
Instructor, Whimsical Animations
Instructor, Whimsical Animations
Josh’s course brings the fun into learning. You’ll learn how to build fun and whimsical animations while learning the underlying concepts that make these animations possible.
Josh goes deep into these topics, and the course is built with accessibility in mind, which I appreciated throughout. This is the kind of teaching that AI cannot replace.
Whimsical Animations is the definitive guide for anyone looking to level up their animation skills. Josh has built a course that is incredibly practical, easy to follow, and perfectly paced.
The content is packed with value, and Josh’s friendly teaching style makes even the most detailed parts very approachable. The entire experience is beautifully designed, interactive, and hands-on from start to finish. If you want to build a more vibrant web, this is the course to take.
Frequently Asked Questions
How much experience do I need to take this course? What are the prerequisites?
This course assumes that you’re comfortable with the basics of HTML/CSS/JS. You definitely don’t need to be an expert, but you should understand how to style an HTML element using CSS classes, how to use setTimeout in JavaScript, stuff like that.
When it comes to animation experience, you don’t need any prior experience. The main curriculum assumes that you’re familiar with CSS transitions and keyframe animations, but the course includes an Animation Primer reference module that introduces all of the fundamentals.
Finally, you don’t need any experience with JavaScript frameworks like React. This course focuses on fundamental animation techniques in a vanilla context. There are some extra lessons that show how to apply these techniques in a component-based context like React, but they’re entirely optional and separate from the main course content.
Is this course still relevant in the age of AI?
LLMs are undeniably powerful tools, but I remain extremely skeptical that they’re on the verge of making human developers redundant. I make the case for this belief in my blog post, The Post-Developer Era (opens in new tab).
In my own work, I use Cursor along with a variety of AI models, and there are definitely times where it feels like magic, with the AI reading my mind and generating exactly what I was hoping for. But this doesn’t really happen with animations. 😅
It can handle basic CSS transitions, sure. But for more advanced animations, like the effects scattered across this page, AI can’t manage it on its own. Unless you tell it exactly what to do, almost line by line, you’ll wind up with a super bland and underwhelming animation, if it works at all.
I think the thing we’re all learning is that AI is great at generic tasks. If I need to sort a linked list or build a basic CRUD app, Claude will do that faster than I can. But it can’t match human creativity. This course will teach you how to add that extra layer of polish that makes your work stand out from everyone else, which is an increasingly-important skill in this era of the web.
Is this a video course or a text-based course?
My courses use a mix of different content types, developed using my own custom course platform. There are interactive articles (similar to what you’d find on my blog), over 100 bite-sized videos, dozens of challenging exercises, and even a couple of mini-games. 😄
Different formats have different strengths. For example, videos are great for sharing processes or demonstrating visual things, but you don’t really build lasting skills by just watching videos, so they need to be paired with opportunities for experimentation and practice.
Also, I think this format is great because it keeps things fresh and engaging. I’ve found that it’s so easy to zone out after 10-15 minutes of a video, so I try to keep the videos short and interspersed with other content.
What if I’m not happy with the course? Can I get a refund?
Absolutely! I have an unconditional 30-day refund policy. If you register for this course and discover that it’s not a good fit for you, for whatever reason, just shoot me an email and I’ll refund your purchase in full, including credit card transaction fees and sales tax. Every cent you paid.
Do you support Purchasing Power Parity (PPP)?
Yes! If you reside in a country with lower purchasing power than most western / EU countries, you'll be given the option to purchase a “regional license”. You can opt in during checkout.
Regional licenses include all of the same content (including bonuses!) at a significantly lower price point. In exchange, the courses can only be accessed within your home region. If you wind up moving to a higher-cost-of-living area and wish to continue accessing the course, you'll need to upgrade to a global license (or a license for your new region), and pay the difference in cost.
Also, regional licenses are available exclusively for individuals. If your employer is purchasing the course for you, they’ll need to purchase a standard license, regardless of where you’re located.
If you don’t see the option to select a regional license, please disable any VPN you might be using, or any browser extensions that could affect your IP address. If you still don’t see the option, it’s possible I don’t have a regional license available for your country. Please reach out to support for more information.
Is there a time limit? How long do I have access to the course for?
There’s no time limit! It’s a one-time purchase, not a subscription. When you register for one of my courses, you’ll have access to it for many years to come, and you’ll even receive all future updates for free! 😄
Can I purchase multiple licenses, for my team or group?
Certainly! You can purchase team licenses (opens in new tab) to distribute to your team. You can save up to 20% depending on the number of seats you purchase.
Please note, only the full course (the “Ultimate” package) is eligible for team licenses. Also, regional licenses are not supported for team licenses.
Is there a student discount?
There is indeed! We can offer a 20% discount for students who can show proof of enrollment. This discount can be combined with regional licenses, as well as with sales and launches.
To qualify, you must be enrolled in a full-time or part-time educational institution. We accept students from high school, college, university, trade school, and coding bootcamps. The main restriction is that you must be currently enrolled, it can't be something you've already graduated from. And it can’t be a self-paced online course.
Please send proof of active enrollment to support@joshwcomeau.com. This can be anything from a student ID card, to registration paperwork. If you have an email address from an academic institution (eg. an .edu domain), sending us an email from that address is sufficient proof. Once we have your proof, we’ll generate a unique coupon code for you to use.
Can I purchase a bundle that includes Whimsical Animations and your other courses?
If you’d like to purchase Whimsical Animations alongside one or both of my other courses, please contact me (opens in new tab). I can offer a 10% discount on any two courses, or a 20% discount on all three.
Unfortunately, I don’t yet have an automatic checkout flow for this, so we’ll have to go the manual invoice route.
Are the videos captioned?
Yes! All videos are captioned in English by a human (we use AI to generate a rough first pass, but we spend quite a bit of time editing them to make sure that there are no errors and that technical terms are written correctly).
We also offer text transcripts for most videos in the course, which include relevant code snippets and images from the video. So, if you prefer written content, you can still follow along with most of the course!
Can I pay in installments?
I’m afraid this isn’t something I currently support, sorry! It’s something I do hope to offer at some point, but there are a variety of technical and bureaucratic reasons that make it much more difficult than I expected.
If you check out with PayPal, it may be possible to split your payment in 3 or 4 installments, but this feature is only offered in certain regions, and based on the whims of PayPal’s inscrutable logic.
What if I get stuck? Can I ask questions?
Yes! We use a private Discord for our online community, and you’ll be able to join after you register for the course. I answer questions in Discord daily. And honestly, our community is an underrated feature of my courses. Thousands of developers have joined, and it’s a very wholesome and supportive place. You’ll definitely be able to get some help if you get stuck. 😄
The community is moderated according to our Code of Conduct (opens in new tab).
I use React Native! Would this course still be useful for me?
I’ve gotten this question a surprising number of times. I had no idea React Native was so popular!
The truth is that I have very little experience with React Native, so I don’t really know how useful this course would be. Some of the course is focused on animation design principles, and those principles will be equally relevant no matter what your tech stack is. But most of the course is focused on implementation using web technologies.
If you’re up for a challenge, I think it could actually be incredibly worthwhile to take the course and to see if you can map the concepts onto React Native’s APIs. You’d learn so much because you’d be actively involved, working to figure out how to connect the dots!
That said, I also know that people sign up for courses because they don’t want to have to figure out a bunch of stuff for themselves 😅. I also wouldn’t be able to offer my usual level of support if you get stuck on something, since I’m not familiar with React Native. So, it’s up to you to decide whether it’d be worthwhile or not.
Do you offer a certificate of completion?
Yep! When you complete this course, a unique certificate will be generated for you. Because each one has a unique ID and is publicly hosted on my course platform, you can add it to your LinkedIn or share it on social media.
Will I receive a receipt or invoice? Can it be customized?
Yep! After purchasing, you’ll receive an email with a link to both a receipt and an invoice. They can both be edited to include any information you need for reimbursement (eg. company name / address, VAT info…).
If your employer requires an invoice or price quote before a purchase is made, please reach out (opens in new tab) and we’ll do our best to accommodate your request.
Is the course available in “light mode”?
Yes! The course is available in both light and dark mode.
I think I’ve gotten this question a few times because the landing pages for my course, like this page, are all dark. And to be clear, my course platform uses a dark theme, so things like the “account” page is mostly dark. But the content itself has a light mode.
Can I gift the course to somebody else?
You sure can!
The easiest option is to use the team checkout (opens in new tab). You can purchase a single team license, which you can then distribute to the recipient through the Team Administrator dashboard.
I have a question not listed here!
You can send us a message through our contact page (opens in new tab). Myself or someone on my team will get back to you ASAP!