Framer X » Animation » The Transition property

The Transition property

With the animate property, you define which properties should animate, and to what value. How things should move, what you might call the ‘animation options’, those are set on a second property, transition.

download the project with the examples

An easing curve

When you move, rotate or resize a Frame (animating physical properties) it will by default happen with a Spring curve.

However, you can select a different curve. Here I picked one of the easing curves: "anticipate".

import { Override } from "framer"

export function The_Transition_property(): Override {
    return {
        animate: { rotate: 45, scale: 1.5 },
        transition: { ease: "anticipate", duration: 2 },
    }
}
B01 – The Transition property

It lets the Frame move back a little, in anticipation of what’s about to happen.

Easing curves like this one (called Tween curves) can also have a duration. I picked 2 seconds. When you omit duration, you’ll get the default value: 0.3 seconds.

More about the different Tween curves

📑 transition, Tween

Spring settings

Let’s go back to that default Spring curve.

You can adjust a bunch of its settings, one of them is the spring’s damping ratio. The lower the value (the default is 10), the more it will oscillate. Here I changed it to 3:

import { Override } from "framer"

export function Spring_settings(): Override {
    return {
        animate: { scale: 1.5 },
        transition: { type: "spring", damping: 3 },
    }
}
B02 – Spring settings

More about the Spring curves

📑 Spring

Loop and Delay

Add a loop value to make an animation repeat.

You give loop the amount of repetitions to add to the initial animation. E.g., with a loop of 2, the animation will run three times.

Or you set it to Infinity to have it repeat ’til the end of time  (or until you close the Preview window, whichever comes first).

import { Override } from "framer"

export function Loop_after_Delay(): Override {
    return {
        animate: { rotate: 360 },
        transition: { ease: "linear", duration: 2, loop: Infinity, delay: 1 },
    }
}
B03 – Loop after Delay
This is a GIF; the real thing doesn’t stop rotating

With delay, you add a pause before the start of the animation (also in seconds). This will only delay the start of the initial animation (and not insert pauses between the repetitions).

I gave the above animation a "linear" easing so that it’s a steady rotation at a constant speed.

📑 loop, delay

Yoyo, Flip, and Bézier curves

With loop, the same animation just starts over. With yoyo (and flip), on the other hand, you reverse an animation, the Frame will return to its initial state.

The difference between these two?

  • flip simply flips the from and to values;
  • while yoyo does the same but also reverses the animation curve.

With yoyo, when an animation started slowly, the reverse animation will end slowly. You know, like a yo-yo.

import { Override } from "framer"

export function Yoyo_with_Bézier(): Override {
    return {
        y: -90,
        animate: { y: 70, rotate: 360 },
        transition: {
            delay: 1,
            duration: 2,
            ease: [0.075, 0.82, 0.165, 1],
            yoyo: Infinity,
        },
    }
}
B04 – Yoyo with Bézier curve

Typically, you give ease one of the (eleven) pre-defined easing curves, like "anticipate", "easeOut", or "linear", but you can also give it the array of four numbers that define a custom Bézier curve.

In this example, I used a stronger ease-out ([0.075,0.82,0.165,1]) to make the yo-yo effect even more noticeable.

More about Bézier curves

📑 flip, yoyo

Transition settings per property

The transition property is a bit like the animation options you could give a Layer in Classic. In the sense that it defines how all the Frame’s properties will animate.

However, you can override that global setting by providing distinct values for one or more properties, like here for rotate:

export function Separate_Transition_values_1(): Override {
    return {
        y: -90,
        animate: { y: 70, rotate: 360 },
        transition: {
            delay: 1,
            duration: 2,
            ease: [0.075, 0.82, 0.165, 1],
            yoyo: Infinity,
            rotate: {
                duration: 2,
                ease: "linear",
                loop: Infinity,
            },
        },
    }
}
B05 – Separate Transition values 1

The rotate animation is now a regular loop with a "linear" curve (instead of the reversing yoyo).

In this second example, I added a scale animation and gave it a Spring curve with a damping of 3.

The scale animation only happens once, because loop, yoyo, and flip only work with Tween curves. (Here’s an overview of which settings work with which curves.)

export function Separate_Transition_values_2(): Override {
    return {
        y: -90,
        animate: { y: 70, rotate: 360, scale: 0.8 },
        transition: {
            delay: 1,
            duration: 2,
            ease: [0.075, 0.82, 0.165, 1],
            yoyo: Infinity,
            rotate: {
                duration: 2,
                ease: "linear",
                loop: Infinity,
            },
            scale: {
                type: "spring",
                damping: 3,
            },
        },
    }
}
B06 – Separate Transition values 2

📑 Transition


Leave a Reply