Basic animation example: Step-by-step

In this tutorial, we'll build the Basic animation example step-by-step.

This example is rated 1/5 difficulty, which means we'll spend some time explaining the Motion APIs that we've chosen to use (and why), and also any browser JavaScript APIs we encounter that might be unfamiliar to beginners.

Introduction

This basic example shows how to use Motion's transition options to configure your animations. We'll be using the animate function with custom options to create a smooth scaling animation.

Get started

Let's start with the basic HTML and CSS structure:

<div class="box"></div>
 
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: #ff6c85;
        border-radius: 10px;
        transform: scale(0.4);
    }
</style>

Let's animate!

Import from Motion

First, we need to import the animate function from Motion:

import { animate } from "motion"

Basic functionality

Now, let's implement the animation that scales our box from its initial size (defined as 0.4 in the above CSS) to full size (1):

animate(".box", { scale: 1 }, { ease: "circInOut", duration: 1 })

This single line does three important things:

• Selects the target element using the CSS selector ".box"
• Defines the target value for the scale property (as 1)
• Provides options that control how the animation behaves

Options explained

Let's break down the options we're using:

{ ease: "circInOut", duration: 1 }

• ease: "circInOut" - This defines the easing function for the animation. The "circInOut" easing creates a circular motion effect that starts slow, speeds up in the middle, and slows down at the end.
• duration: 1 - This sets the animation duration to 1 second.

Motion provides many options to customize your animations:

• duration: Animation length in seconds (default: 0.3)
• ease: The easing function (default: "easeOut")
• delay: Delay before animation starts in seconds
• repeat: Number of times to repeat the animation
• repeatType: Can be "loop", "mirror", or "reverse"
• repeatDelay: Delay between repeats
• type: Can be set to "spring" for a physics-based animations

Easing Functions

The ease option accepts various easing functions that control the rate of change during the animation:

• Linear: "linear"
• Ease out: "easeOut" (default)
• Ease in: "easeIn"
• Ease in and out: "easeInOut"
• Circular: "circIn", "circOut", "circInOut"
• Cubic bezier curves: For example [.42,.1,.25,.92]

Try it yourself

You can experiment with different options to see how they affect the animation:

// Slow bounce effect
animate(".box", { scale: 1 }, { ease: "easeIn", duration: 2 })
 
// A delayed ease in/out with a fast middle
animate(
    ".box",
    { scale: 1 },
    { ease: [0.42, 0.1, 0.25, 0.92], duration: 0.5, delay: 0.3 }
)
 
// Looping animation
animate(
    ".box",
    { scale: 1 },
    {
        ease: "easeInOut",
        duration: 1,
        repeat: Infinity,
        repeatType: "mirror",
    }
)

Conclusion

In this tutorial, we learned how to use Motion's animation options to control the timing, easing, and behavior of animations. These options provide fine-grained control over your animations, allowing you to create experiences that feel natural and engaging.