Gallery of Components
Each component is split into a few exercises with video and text explanations. These are not all components, only the more complex ones. You will work on these in the course after doing some simpler exercises first.
Feedback Popover
The main goal of this component is to use a few features we have learned so far and combine them into a single component.
Dynamic Island
Recreation of iOS's Dynamic Island, but on the web. The main focus here will be on the spring animation, how to make it feel organic and natural. This component also contains a lesson focused purely on studying and analyzing Apple's design choices.
Shared Layout Modals
One of the exercises we'll build to use things we have learned in the "How do I code animations" lesson. We'll start with a static version of it and your job will be to animate it.
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.
Toast Component
Sonner's expanded mode. We will build this one with the help of CSS transitions, no Framer Motion.
Interactive graph
Main focus here is on the interaction. How do you make a mouse interaction feel right?
Login Button
Another exercise from the "How do I code animations" lesson. This one teaches you one of the core features of Framer Motion. Again, we start with a static version, you try to solve it and then we go through the solution together.
Family Drawer
Recreation of Family's iOS drawer. It's a walkthrough video where I'll show you how to create such component from scratch. We'll go through designing the right motion for it first, and then we'll implement it.
Hold to delete
A pretty simple yet effective component to practice CSS transitions.
App Store-like transitions
Recration of Apple's App Store transition. This one contains the code only so you can read it and try to understand how it works.
Game of the day
A game about vikings
Are you ready? A game about vikings, where you can play as a viking and fight other vikings. You can also build your own viking village and explore the world.
The never ending adventureIn this game set in a fairy tale world, players embark on a quest through mystical lands filled with enchanting forests and towering mountains.
Coin Flip
A component to practice CSS keyframes animations.
Enter animation
An exercise that teaches you how to sequence animations. Press the restart button in the bottom right to see the animation.
Animations on the web
The registration for the course opens on June 17th, 9AM EST.
When you purchase it, you'll get instant access to three 3 chapters, 2 interviews, a Discord invite, and a vault with useful links articles, videos, courses etc.
That's 16 lessons, 27 videos, more than 30 interactive examples, 15 exercises with a custom code editor, and a lot of code.
All future updates will be free. You'll get notified about a new lesson, interview, or an update to an existing lesson.
Students that purchased it, love it, but if you discover that it's not right for you, whatever the reason is, you can ask for a refund at any time by sending an email. No questions asked, and no hard feelings.
Tabs
A component that helps you understand the details. Press the 1x button in the top right corner to slow it down and see how smoothly the active state transitions.
Multi Step Component
We'll learn how to animate dynamic height (auto to auto) and how to make exit animations dynamic based on state (exit animation direction changes based on the button clicked).
This is step one
Usually in this step we would explain why this thing exists and what it does. Also, we would show a button to go to the next step.
Text morphing
An exercise from the "Animations of the Future" chapter, a fun one to build.
Trash interaction
A component that uses multiple techniques that we will learn in the course.