Each enrollment period means new content. This changelog is a record of all updates since the initial release (September 2024). It’s worth noting that all of these updates are free of charge for existing students.
You’ll learn how to build a navigation menu component in a new, 3 part walkthrough series. This menu is inspired by the ones I built at Vercel and Linear, and as always, we’ll not only focus on the implementation, but also on the easing, duration, and so on.
There’s also a new theory lesson called “Animations and AI”. In it, we’ll talk about how AI can help you with animations and how I use AI in my work. You’ll also get a Cursor Rules file that contains all the principles from the theory lessons so that an LLM knows how to help you properly.
# 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:
A solution to the coin flip reverse engineering exercise has been added based on requests from students.
Two new Framer Motion lessons on hooks have been added. In them we cover things like useSpring
and useTransform
. These hooks are not used often, but they are very powerful. I used them for this graph illustration at Linear for example:
We’ll start slowly by going over the basicsc and doing some simple exercises to get comfortable with these hooks. We’ll build the component below to wrap the first lesson. It’s not the most beautiful one, but it’s great to practice all that we’ve learned.
Hover over the card to experience the interaction.
In the second lesson we’ll have a few exercises that will result in the interactive graph component below. It’s worth noting that this type of interaction is meant for illustrations, not functional graphs like stock charts for example.
An interactive graph built with `useSpring` and other hooks.
Students wanted to practice the things they learned in "The Magic of Clip Path" lesson so a new exercise has been added. In it we build a "Hold to Delete" button that has a scale down animation with a linear transition for the button color.
Tips on how to record your animations have been shared in the "Animating in Public" lesson. There’s also a new, hour long interview with Dennis Brotzky from Fey, in which we talk about how Dennis got to where he is today and how he thinks about motion at Fey.
A screenshot used in the "Animating in Public" lesson.
A new CSS Animations module has been added. We’ll start by understanding the foundation of web animations by learning about CSS transforms. Then, we’ll move to CSS transitions where we’ll build components like this one:
A toast component made with CSS transforms and transitions.
After that, we’ll learn about keyframe animations. From animations like the blinking cursor:
To more complex ones like the orbiting animation. While it might not look amazing, it unlocks lots of possibilities as we learn about 3D transforms.
We’ll close this module off by learning about clip-path
. It’s a very useful, but underrated tool. In this lesson we’ll build the tabs component among other components.
An interview with Lochie Axon, a design engineer working at Family, has been added. In there we talk about how he thinks about animations, the twelve basic principles of animation, his work at Family, and more.
One of the components Lochie has built at Family.
Join designers and engineers who have refined their animation skills by taking this course.