If you’re looking to up your UI game, this is it. Emil has done it once, twice, many times.
How do you craft animations
that feel right?
Learn the theory and practice behind great animations with this interactive learning experience.
Coding animations is hard, and unfortunately, many tutorials follow a happy path. They cover simple animations that are great for beginners, but aren’t that helpful once you go past the basics.
But it’s not just the code that makes an animation work. A bad easing or duration can ruin an otherwise great animation. But how do you know whether you made the right choices? You don’t because animations are tricky. It just doesn’t feel right and you can’t tell why.
Can you clearly explain why this animation feels right or why it doesn’t?
What if you knew exactly how to craft great animations?
If you knew what a great animations consists of, you would know which easing to use, what the duration should be, what properties to animate to keep it performant, and so on.
You could stop guessing, “Does this easing work?” or “Is this enter transition too long?”, because you would know you chose the right ingredients.
And most importantly, you would be able to craft animations that your users love.
The interactive learning experience where you’ll learn
the theory and practice behind great animations
Animations on the Web is a course where you’ll learn how to choose the right easing and timing, how to improve your taste, what spring animations are, and so much more.
You’ll finally become confident in your choices instead of guessing what might work.
All of that on a custom-built platform tailored to this course.
After learning the theory, we’ll jump into practice. We’ll build a lot, and there will be a lot of exercises as that’s how you learn the most. After these lessons, you will know exactly how to code great and performant animations using CSS Animations and Framer Motion.
Trusted by developers and designers at
I never get tired of recommending Emil’s course, even if you come only for framer-motion, that is not the only thing you learn. You learn to understand how an animation works, tips, many visual references and more!
Don’t sleep on this course - learning from Emil is worth much more than this price tag.
Currently in progress for Emil’s course on animations. I’ve never used Framer Motion, but it’s so easy with the right guidance! 10/10 course, would recommend for beginners like me.
Purchased this course and tbh I just love the theory so much. Articulated clearly and opinionated in all the right places. 👌🏼
Having only just started my design and dev career, Emil’s course opened my eyes to the level of quality and detail that I want to reach one day.
As a rule of thumb, every front-end developer should purchase Emil’s animations course.
I just finished the first module of animations.dev in one sitting – great content.
Love the course content so far. I had a reasonable understanding of the Framer Motion basics, but Emil’s demos and code examples has really helped me better understand how to make some really great animations. I’m looking forward to applying the new knowledge.
Gotta say Emil’s animation course is really proving to be helpful!
Emil is extremely talented at what he does, you don’t want to miss his course!
Just bought Emil’s Animations on the web and couldn’t be more happy. The intro chapter just changed my mental model on animations. Worth every cent.
Signed up for this and the course is amazing! Learnt so much and I’m only 50% done 😅 Already implemented some basic animations on Raven’s sidebar for toggling the channel list.
I bought Emil’s course on web animations last month and it is great! Happy to learn from the best! This is a great way level-up your design/frontend skills!
Emil, LOVED the animation course!
This course is sick. Would recommend.
I’ve taken Emil’s animation course and it’s phenomenal. It teaches not just how to animate - but how to design with feeling. I learned so much building alongside it. Can’t recommend it enough.
I just picked up Emil’s course and it is fantastic! With a video overview of the lesson, breakdowns, and interactive elements, you have everything you need to create fluid, natural, and stunning animations on the web.
I deeply regret not discovering Framer Motion sooner. I build the behavior of the iPhone’s dynamic island with this tool. Emil, what a course! It really helped me a lot!
Can confirm, this course is inspiring, well constructed, and an amazing value!
It has been useful to be able to pull snippets from examples from this course to make my site feel nicer!
The web will become a better place because of this.
10/10 Material. I learned a lot of handy stuff and using them at work as well.
Thanks to Emil for an amazing course, really well made!
Can’t recommend this animation course enough. The theory and thinking about animations is a gem info you will find.
This week I’ve bought animation.dev course from Emil. I’ve already went through the first lesson. So far, so amazing. Having no background in animations and more technical stuff - I feel like it will take me to another level.
Enrolled in Emil’s course. The insights on each animation are incredible!
Thanks Emil - the animating auto height tip in your course was a life saver :)
Shoutout to Emil for his amazing "Animations on the Web" course—it’s been a game-changer in my learning process!
I’m currently using this course, and I highly recommend it for frontend developers. If you’re into frontend development, you should definitely give it a try!
The best in the market is Emil’s course! Learnt a lot from him.
Really great course. Recommend enrolling if you want to improve your animation skills!
Highly recommend Emil’s animation course when it comes to understanding motion that feels right.
Lately I have been thinking a lot about learning animations, and that’s sick opportunity, Emil is the goat.
I already started the course and it’s really well-made.
Great teaching! Also, Emil is responsive in the discord for help. Very nice experience.
Best money I ever spent on a course! If you’re a front end dev, this is a must!
I just finished module 1 with theory and mindsets and it really helps me understand how animation can change how people feel about the app.
Get animations.dev by Emil. Thank me later.
animations.dev by Emil is worth it because theres a ton of resources to deep dive into. It’s like a textbook but you only get the entire value by diving deep and going thoroughly through all articles/resources, exercises, reimplementing everything. Very eye opening course and will translate to all work i do in future.
Can’t believe how much I was missing about web animations. I wasn’t animating, just moving stuff around and getting lucky sometimes. But but but Emil dropped that god-level detailing—now it all makes sense. I finally get it. The web feels alive now.
I also took the animation course, which changed my perspective toward animations. It is more about animations than animation tools, unlike other courses.
So good, one of the few courses I’ve found have been worth every penny.
Amazing course. Super intuitive and easy to follow. And your apps will look soooo much nicer!
One of the greatest courses on modern web animation available, with plenty to learn whether you’re new to crafting animations or a seasoned expert.
Went through Emil’s animation course and it was game-changing!
I HIGHLY recommend Emil’s course, I’ve taken it myself and learned so many things on tasteful designing and motion for react.
I’ve been really enjoying the course so far!
Even after using these tools for so long, it feels like I’ve been holding the hammer wrong the whole time.
Emil’s course taught me everything I know about UI animation.
I’ve only just started diving in, but holy shit! This course is genuinely superb, and I Emil is the first person I’ve seen that *properly* explains how to use Framer Motion. Worth the money any day!
Goes without saying this will level up your web animation skills. Emil consistently shares beautifully crafted components with the community, and his work always delivers quality.
I was shocked by the clarity of Emil’s course and the extra value of interactivity in his explanations. His demos have been an important inspiration in the process.
"How do I code animations" is pound for pound the best course section I’ve ever engaged with. It involves so much Framer Motion goodness and unlocks so much. Like that section alone can take you so far in your animation journey.
Emil’s course goes beyond the tools you need to build animations on the web. There’s a resounding focus on taste and quality in every lesson.
I feel like CSS wizard, CSS module in Emil’s course is so good!
It’s been amazing to work on my web animation skills with the help of this course. The content itself is great and Emil is constantly updating and making changes according to feedback. Truly next level.
Knew some stuff about framer motion and animations before but Emil’s course has stepped up my game to a new level already. Highly recommend!
I love so many things about animations.dev. My fav are: amazing pace and vibes, lot of great resources, focus on why and when animations enrich UX, vs showing the "how" in code.
Huge thanks to Emil for his course. It is pure gold.
Just grabbed Emil’s course! Love the pace, and care taken on each section. 👑
Big thanks to Emil for animations.dev. Loving every bit!
Vue, sorry, but there is no Framer Motion alternative and Emil’s course is 🔥
Emil’s course was monumental in my interaction design journey. Seriously couldn’t recommend it more!
Just finished the first module. Awesome course!
The best investment you will make if you’re serious about learning animations.
This is an absolute steal for $199!
Great course that takes your skills to the next level when it comes to animating content for your apps!
Best investment you’ll make in 2025.
Learning a lot from @emilkowalski_’s animations course
Best course I’ve ever bought!
Pretty cool to see one of my demos on Emil’s animations.dev. Super great course, only wish I had done it myself. 10/10 would recommend so far.
There are a few courses that I would definitely recommend. This is one of them!
Can’t wait for the updates, been an absolute masterclass so far. I *thought* I knew UI before, nope. Emil plays a different game
I love the course 😍 And I’ve already used the trick with useMeasure to smoothly resize the component, I’ve been working on.
Emil’s course is really great!
Awesome course! Must take if you want to create exceptional and well animated UI.
Emil’s course is a must.
I’ve done Emil’s course and it’s excellent!
I am currently looking through Emil‘s course.
10/10, would recommend.
This course is a great resource for learning and for inspiration, being able not only to craft but to understand great design and animations is a game changer.
Just finished animations.dev by Emil and WOW. This is a must for anyone who wants to take their web animations to the next level! Highly recommended!
Very well done course on Framer Motion and foundational animation principles! I vouch for this, it’s worth joining. Emil is a magician!
Emil cooked with his course! I like the interactive part, it really keeps you immersed and I find my self even deliver more than the exercises ask for.
Hands down the most no-brainer investment I’ve made to learn web animation.
Before this course, I had no idea CSS animations were this powerful and you don’t really need an external library to create fancy effects.
Emil truly is a great teacher, I am truly enjoying learning from him. Keep up the great work and keep the updates coming!
It was thanks to this course that I was able to launch ui.lndev.me. Don’t hesitate for a second if you want to level up your web animation skills.
Emils course is truly great and you will fill some cracks even when you think you already know a lot about animations!
Emil’s course is one of the best resources I’ve seen on pushing great & practical animations/interactions to production. I’m not personally using (Framer) Motion but I still got a LOT of insights and tips.
I’ve learned a lot from this course and it has so much finesse. I’ve been able to take learnings from Motion (formerly Framer Motion) and apply them daily with a little web app I’m building.
If you want to level up your animation skills, this course is all you need. I took it last year and couldn’t recommend it more! You’ll get lifetime access, and Emil keeps adding new lectures over time.
This is an amazing course on animation, very easy to follow and with immediate applicability if you need it. I was able to purchase it, watch it and apply it in a PR in the same day. Highly recommend!
Made it to the Framer Motion section of animations.dev today and my mind is blown. Learning a ton, thanks Emil!
Hey, I’m Emil
I’m currently working as a design engineer at Linear. In the past, I’ve worked on the design team at Vercel where I developed the design system, dashboard, docs, and more.
I also created Sonner and Vaul, two open source React libraries that rely on animations. These packages are downloaded over 9,000,000 times per week from npm.
I see animations on the web as a form of art, and care deeply about how they look, feel, and behave. I want people to have a moment of joy when they use the things I create.
“Emil consistently creates the highest quality animations on the web. His course is a must-have for anyone looking to craft world-class interfaces.”
Benji TaylorFounder of Family
What you’ll get
Starting with the 4 base modules all the way through walkthroughs, you’ll
learn everything you need to know to build great animations on the web.
Module 1
Making it feel right
We’ll dive deep into the theory behind great animations. We’ll talk about taste, spring animations, timing, purpose, and more. After this module, you’ll stop guessing.You’ll know exactly why an animation feels off, and how to make it better.
# Animations Guidelines
## Keep your animations fast
- Default to use `ease-out` for most animations.
- Animations should never be longer than 1s (unless it’s illustrative), most of them should be around 0.2s to 0.3s.
## Easing rules
- Don’t use built-in CSS easings unless it’s `ease` or `linear`.
- Use the following easings for their described use case:You’ll also get a Cursor rules file that will help you write better animations.
Module 2
CSS animations
We’ll make sure that you get the basics of CSS animations right and know when and how to use them. This way you’ll be able to transition into Framer Motion with ease.
You’ll learn about transforms, transitions, keyframe animations, and more. Not just the basic, but real-world examples and exercises that will actually help you.
One of the animations we’ll build. Click on the button to see it animate.
While this module involves a lot of coding, we will still talk about the theory. In the solution of exercises, I often talk about which easing and duration I chose and why. This is often times more important than the code itself.
Module 3
How do I use Framer Motion
Framer Motion’s documentation often times follows a happy path. It covers simple animations, which are great for beginners, but don’t give you a lot of insight on how to craft more complex ones or what to do when something breaks.
That’s why, in this part, we’ll build a lot. We’ll cover the basics, then quickly move to more complex animations like the Feedback popover below. We’ll run into issues and solve them, so that you’ll know what to do when you run into similar problems yourself.
This component consists of 3 separate exercises.
Module 4
Good vs Great animations
At this point in the course we know what differentiates a good animation from a bad one, and we know how to code them. In this module we’ll explore both the theory and practice on a deeper level.
The Oddysey
Explore unknown galaxies.
Angry Rabbits
They are coming for you.
Ghost town
Scarry ghosts.
Pirates in the jungle
Find the treasure.
Lost in the mountains
Be careful.
You’ll build this one in the form on an exercise.
We’ll talk about how you can transfer feelings with animations, the importance of orchestration, accessibility, and more. After this module you’ll know how to take your animations from good to great.
“It’s been amazing to work on my web animation skills with the help of this course. The content itself is great and Emil is constantly updating and making changes according to feedback. Truly next level.”
LauraoDesign Lead, Lagrange Labs
Walkthroughs
This is the second part of the course in which you’ll get to see how I create animations from scratch, including the reasons behind my decisions.
The difference between components we build here and the ones in previous modules is that here, I show you my exact thought process. We’ll start by just thinking and talking about the animation we want to make, then move to the code, improve it and iterate.
Family’s drawer
We’ll build a drawer for mobile devices used in the Family’s iOS app.
Visual components by Family.
For educational purposes only.
Dynamic Island
The focus here will be on the spring animation, how to make it feel organic and natural.
“Just finished Emil’s course and WOW. This is a must for anyone who wants to take their web animations to the next level! Highly recommended!”
Julio PalenciaFront-end dev
You’ll also get…
After enrolling in this course you’ll also get access to some bonus
features that will help you in your animation journey.
An exclusive Discord community where you can learn with others.
7
Animations on the Web
A curated selection of videos, articles, and other animation resources.
Interviews with experts about animations, design, and more.
Family@lochieaxon
Fey@brotzky
poolside@mrncst
Vercel@henryheffernan
A set of 18 custom easing functions that I use in my animation work.
01:root {
02--ease-breeze: cubic-bezier(.55, .085, .68, .53);
03--ease-silk: cubic-bezier(.52, .062, .64, .21);
04--ease-swift: cubic-bezier(.86, .04, .67, .24);
05--ease-nova: cubic-bezier(.73, .065, .82, .08);
06--ease-crisp: cubic-bezier(.92, .06, .77, .045);
07--ease-glide: cubic-bezier(.58, .06, .95, .32);
“If you’re looking to up your UI game, this is it.
Emil has done it once, twice, many times.”
shadcnDesign Engineer, Vercel
Get better at animations, today
Join designers and engineers who have refined their animation skills by taking this course.
- Theory and practice combined
- Vault with additional resources
- Private Discord community
- Money-back guarantee, anytime
- More than 40 exercises
- Free future updates
- Interviews with experts
- Access for life
Registration closes in0000 days0000 hours0000 minutes0000 secondsStart learning now $199
Course
This course is for designers and engineers. We start by covering the theory. The concepts learned there can be used by engineers that code their animations, but also designers who prototype their work in Figma, or any other tool. Then we move to the coding part, it’s done in the custom-built code editor on the course’s platform, using React, CSS, and Framer Motion.
It’s a beginner-friendly course, you don’t need any prerequisites for the theory part. The coding part requires basic CSS and React understanding. You don’t need to be an expert, you don’t need to be up-to-date on all the latest developments, but you should be comfortable with basic rules of CSS (we will cover transforms in the course), and you should be able to write a very simple React component that changes state. If you are able to change button’s loading state through an onClick event, then you should be good to go!
When it comes to Framer Motion, we’ll start from scratch, so you don’t need to know it beforehand.
It’s a beginner-friendly course, you don’t need any prerequisites for the theory part. The coding part requires basic CSS and React understanding. You don’t need to be an expert, you don’t need to be up-to-date on all the latest developments, but you should be comfortable with basic rules of CSS (we will cover transforms in the course), and you should be able to write a very simple React component that changes state. If you are able to change button’s loading state through an onClick event, then you should be good to go!
When it comes to Framer Motion, we’ll start from scratch, so you don’t need to know it beforehand.
Yes! You’ll have access to an exclusive Discord community where people share their work, talk about the course, animations in general, and much more! I’ll be there too, sharing my work and answering questions. On top of that, there are channels for feedback on your work, job postings, and more.
Each lesson will have a video on top with some written content that contains exercises, videos with explanations and solutions of those exercises, interactive examples, code snippets etc. Everything on a custom-built platform. Below you can see how it looks like.
This is a part where we have two exercises after each other. Upon clicking the "View Solution" collapsible, the solution video with written content will appear.
Here’s the top part of a lesson. A video on top, followed up with written content, exercises, interactive examples and more.
This is a part where we have two exercises after each other. Upon clicking the "View Solution" collapsible, the solution video with written content will appear.
Here’s the top part of a lesson. A video on top, followed up with written content, exercises, interactive examples and more.
Yes! Each enrollment period means new content, free for existing students. You can see all the updates in the changelog. It’s important to me that this course stays up to date, students also really appreciate it:
“If you want to level up your animation skills, this course is all you need. I took it last year and couldn’t recommend it more! You’ll get lifetime access, and Emil keeps adding new lectures over time .”
David McBaconFounder, Bachoff Studio
Both! There is a module about CSS Animations and another one about Framer Motion.
Yes! After completing at least 70% of the course you will be able to save a .pdf with your name on it, showing that you’ve completed the course. This certificate can also be verified, as each one has a unique URL that you can share.
Purchasing
No, all future updates are free. Each enrollment period means new content, all free of charge. For
example, the CSS Animations module wasn’t in the initial release, but
it’s now part of the course.
Yes, you can purchase multiple licenses through the Team Checkout page. You’ll receive a 10-20% discount, depending on the number of licenses purchased.
If you are not happy with the course, whatever the reason is, you can ask for a refund at any time, even after a year, by sending an email at e@emilkowal.ski.
Yes! After purchasing you’ll get an email with a link to generate a customized invoice.
Yes! If you are from a country that qualifies for a discount, you’ll see an element below the purchase button with the discount code. Keep in mind that if you use the PPP code, you’ll only be able to access the course from the same country you purchased it from.
Yes, you can receive 20% off. To get a discount code, send me an email at e@emilkowal.ski with proof of enrollment. This can be anything from a student ID card, to registration paperwork. If you have an ".edu" email address, sending me an email from that address is sufficient proof.
Help
Totally! You’ll have access to an exclusive Discord community where you can reach for help.
Shoot me an email at e@emilkowal.ski.