Intro
All you need to know before getting started.
What makes an animation feel right
Why some animations feel better than others.
The Easing Blueprint
The different types of easing and when to use them.
Spring animations
The secret ingredient.
Timing and purpose
When and how to animate.
Taste
Why it’s important and how to improve it.
Animations and AI
How AI can help you create great animations.
Practical Animation Tips
Simple ideas that can improve your animations.
The beauty of CSS animations
What makes CSS animations so great.
Transforms
A property that we have to understand before moving forward.
Transitions
The basics of CSS transitions.
Keyframe Animations
Everything you need to know about keyframe animations.
The Magic of Clip Path
A very powerful CSS property.
Why Framer Motion
What are the alternatives and why I use this library.
The Basics
Basics of Framer Motion.
How do I code animations
In-depth look at how I use Framer Motion.
Feedback popover
A component that uses a few techniques we’ve learned.
Multi-step component
A direction aware multi-step component.
Trash interaction
Recreation of Family’s trash interaction on the web.
Hooks and animations
How we can use hooks with animations
Interactive graph
Using hooks to create an interactive graph
Animating in public
Taking advantage of what you have learned.
The big little details
Details that can take your animation from good to great.
Performance
Everything you need to know about web animations performance.
Accessibility
Great animations are accessible to everyone.
Animations of the future
What the future holds for animations.
The analysis
A break down of the drawer to see what makes it feel great.
First animations
We’ll start by adding Vaul and animating the height.
Crossfade
Crossfade effect, a crucial part of the animation.
The finishing touch
Some final polish to make it feel even better.
The Design
A break down to determine the requirements.
Ring view
We’ll build the ring view with Framer Motion’s keyframes.
Timer view
Another view, this one will reuse things we have learned.
Morph effect
The hardest part of the Island.
Know your tools
A lesson on the importance of knowing your tools.
Closing thoughts
A smaller improvement and my thoughts on libraries.
SVG introduction
SVG fundamentals before we dive into the animations.
Lines and dashes
Everything you need to know about lines and dashes in SVGs.
Rotation
The basics of rotating SVG elements.
Click animation
Building the click animation.
Clock animation
Building the clock animation.
Polish
Adding subtle details to make this truly stand out.