Changelog

New Walkthrough series

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.

New Framer Motion lessons

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.

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.

Hold to Delete button

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.

How to record animations and new interviews

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.

New CSS Animations module

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:

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.

New Interview

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.