Intro

Overview

Welcome to animations.dev!

I know that crafting great animations can feel challenging, but that’s exactly why I built this course! You’re in good hands. By the end of it, you’ll have all the knowledge and tools to build animations that feel right.

Before we dive in, let’s go over some general information about the course.

The structure

This course is split into four modules and a series of walkthroughs.

The first module covers the theory behind great animations. We’ll learn how to think about animations, how to choose the right easing and duration, when to animate, everything you need to stop guessing and start crafting your animations with confidence.

There’ll be lots of good vs bad examples to help you understand and feel the difference.

Then we put the theory into practice. We’ll build components like the trash interaction, a feedback popover, a 3D coin animation, and more. Each one is broken down into hands-on exercises that make the concepts stick.

One of the components we’ll build.

Then there’s a separate section called the Walkthroughs where I share my entire process with you. You’ll get to see how I create animations from scratch, including the reasoning behind my decisions.

We’ll build the Dynamic Island, Family Drawer, and a Navigation Menu.

Lesson structure

Most of the lessons include a video and a text version with interactive components. I recommend watching the video first, and then working through the text version. It not only contains additional examples, but also includes some extra explanations.

The theory module does not contain many videos. That’s because I really want you to play with the interactive examples and truly experience what I’m trying to teach. This will be crucial in order to understand some of the concepts.

Code Playgrounds

This course has a ton of exercises. We use an interactive code playground to allow you to write code without leaving the platform. Here’s what it looks like:

import { motion } from "motion/react";
import { useState } from "react";

export default function Example() {
return (
<div className="wrapper">
    <motion.div
      initial={{ opacity: 0, scale: 0 }}
      animate={{ opacity: 1, scale: 1 }}
      className="element"
    >
    <h1>Hello</h1>
    </motion.div>
</div>
)
}

Your changes are saved automatically. You can test it by changing the text to “Animations” and refreshing the page. Your edit will be preserved.

In the top right corner, you’ll find several controls. Let’s go through them:

• Reset code - Removes all your changes and resets the code to the initial state.
• Toggle line numbers - Show or hide line numbers to the left of the code.
• Toggle fullscreen - Expands the editor to fill the screen for a better coding experience.
• Refresh preview - Reloads the preview. Useful to see an intro animation for example.

Reset code - Removes all your changes and resets the code to the initial state.

Toggle line numbers - Show or hide line numbers to the left of the code.

Toggle fullscreen - Expands the editor to fill the screen for a better coding experience.

Refresh preview - Reloads the preview. Useful to see an intro animation for example.

Progress tracking

At the bottom of each lesson, you’ll find a “Mark as complete” button. Pressing it will mark the lesson as complete and the sidebar will update the lesson with a checkmark.

Once you’ve completed 70% of the lessons, you’ll be able to generate a certificate of completion by clicking on the account dropdown in the top right corner at the top of the page.

How to get the most out of this course?

The best way for me to teach you how to build great animations is to challenge you. The exercises might feel difficult at times, maybe even a bit uncomfortable, but it’ll be worth it. That’s how you learn most effectively.

You can’t learn how to craft great animations by watching me do it, just like you can’t learn how to play guitar by watching someone else play.

Just showing you the solution would be a disservice. I want you to truly learn, not just copy the code I wrote. Building things yourself is the best way to do that.

By following this approach, you’ll not only know how to build a Dynamic Island that looks and feels great, you’ll be able to build anything that looks and feels great.

That’s how I’d recommend you approach this course. But if you’d rather watch me solve the challenge first, or do it together with me, that’s fine too. Whatever works best for you!

Bonus features

In addition to the lessons, I’ve created the Vault, a list of resources related to animations, design, and engineering that I personally use and recommend.

There’s also a series of interviews with great designers and engineers from companies like Vercel, Family, and Fey.

• Dennis BrotzkyEngineer at FeyThis interview is about Dennis’ background, but also about Fey, how they maintain a high level of quality, and more.
• Lochie AxonDesign Engineer at FamilyWe talk about how Lochie built Family’s site, how he got into design engineering, CSS vs Framer Motion animations, and more.
• Henry HeffernanDesign Engineer at VercelThis interview is about design engineering at Vercel, how Henry thinks about easings, taste, and more.
• Mariana CastilhoProduct Designer, poolsideWe are going to talk about product design, how she learned to code as a designer, and how that influenced her design proces

This interview is about Dennis’ background, but also about Fey, how they maintain a high level of quality, and more.

We talk about how Lochie built Family’s site, how he got into design engineering, CSS vs Framer Motion animations, and more.

This interview is about design engineering at Vercel, how Henry thinks about easings, taste, and more.

We are going to talk about product design, how she learned to code as a designer, and how that influenced her design proces