Basic animation: Step-by-step tutorial

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);
    }
<

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.