Framer X » Animation » The Animate property

The Animate property

download the project with the examples

Basic animation

You know that you can change a Frame’s properties with an Override. You can move, resize, rotate it, change its background color,… or do all of that at the same time:

import { Override } from "framer"

export function Changing_properties(): Override {
    return {
        left: 10,
        top: 10,
        scale: 0.5,
        rotate: 45,
        background: "Gold",
    }
}
A01 – Changing properties
Left: Canvas — Right: Preview window

And this will happen instantly.

Well, the same thing happens when you pass those same values to the animate property, only then… animated.

import { Override } from "framer"

export function Animating_properties(): Override {
    return {
        animate: {
            left: 10,
            top: 10,
            scale: 0.5,
            rotate: 45,
            background: "Gold",
        },
    }
}

As you can see, you pass the properties to animate in the exact same way, only now wrapped inside an {object}.

A02 – Animating properties
Animation in the Preview window

Whenever you give animate new values, the Frame will animate to those values.

This animation now happens immediately, the moment the Frame becomes visible, but in the next pages, we’ll look at how you can trigger it with an event.

📑 animate

Animating a Code Component

The above example is an Override, but in a Code Component this works the same:

import * as React from "react"
import { Frame } from "framer"

export function A02_Animating_properties() {
    return (
        <Frame
            // Visual & layout properties
            size={150}
            radius={30}
            background="#fff"
            left={125}
            top={125}
            // Animation
            animate={{
                left: 10,
                top: 10,
                scale: 0.5,
                rotate: 45,
                background: "Gold",
            }}
        />
    )
}

(The {{double curly braces}} are there because you’re writing the object directly inline.)

Obviously, there’s more code here because the Frame’s visual and position properties also had to be set. (A default, empty <Frame /> is a dull transparent blue square.)

So in the upcoming Code Component examples I’ll only show the animation code, like this:

export function A02_Animating_properties() {
    return (
        <Frame
            animate={{
                left: 10,
                top: 10,
                scale: 0.5,
                rotate: 45,
                background: "Gold",
            }}
        />
    )
}

You can always find the full code in the example project.

Transform properties

In the above example, I changed the left and top properties, but it’s actually better to use x and y to animate a Frame’s position.

With these (what they call) transform properties, animations will run a bit smoother (GPU accelerated).

They also have the advantage that they start from zero, which makes moving a Frame ten points to the right as simple as x: 10.

Other GPU accelerated transform properties are: scale, scaleX, scaleY, rotate, rotateX, rotateY, skewX, and skewY.

import { Override } from "framer"

export function Transform_properties(): Override {
    return {
        animate: { scaleY: 0.5, scaleX: 2, skewX: -6, y: -120 },
    }
}
A03 – Transform properties

📑 Transform

Transform origin

These transforms (scaling, rotating, and skewing) will happen from the Frame’s transformation origin. By default, this is the center of the Frame, but you can change that.

In this example, I placed the originY at the top of the Frame, so that the (x-axis) rotation happens with that edge as the center point.

import { Override } from "framer"

export function Transform_origin(): Override {
    return {
        originY: 0,
        animate: { rotateX: 360 },
    }
}
A04 – Transform origin

By the way, I applied some perspective to the Frame’s parent to make the animation look three-dimensional:

export function Parent_frame(): Override {
    return {
        perspective: 800,
    }
}

📑 originX, originY, originZ, perspective

Colors

Just like you can change a Frame’s background color, you can also animate it. As always, you write the color as a text string, in any of the possible CSS color formats:

  • Named color"Lime"
  • Hex Code — "#00ff00"
  • Websafe Hex Code — "#0f0"
  • RGB Decimal — "rgb(0,255,0)"
  • RGBA Decimal — "rgba(0,255,0,1)" (the last value is ‘alpha’)
  • Hue Saturation Lightness — "hsl(120,100%,50%)"
  • Hue Saturation Lightness Alpha — "hsla(120,100%,50%, 1)"
import { Override } from "framer"

export function Color_Named(): Override {
    return {
        animate: { background: "Tomato" },
    }
}

export function Color_RGB(): Override {
    return {
        animate: { background: "rgba(153, 204, 102, 0.8)" },
    }
}

export function Color_HSL(): Override {
    return {
        animate: { background: "hsl(290, 50%, 60%)" },
    }
}
A05 – Colors

You can also animate between different color formats, like from a named color to a hex value.

📑 background, backgroundColor

Complex values

Some CSS values are more complex.

A CSS shadow is also written as a string, but this string can contain the shadow’s x and y-offset, blur, spread, and color.

But you can animate all these values, simultaneously, if you stick to one kind of notation.

Take this Code Component example:

export function A06_Complex_values() {
    return (
        <Frame
            // Initial shadow
            style={{ shadow: "0px -300px 80px 100px rgba(255, 255, 255, .3)" }}
            // Animation
            animate={{
                background: "#4400FF",
                shadow: "0px 0px 80px 30px #fff",
            }}
        />
    )
}
A06 – Complex values

It’s initial shadow (which has to be set on style) is:

"0px -300px 80px 100px rgba(255, 255, 255, .3)"

Which stands for:

  • 0px — x-offset
  • -300px — y-offset
  • 80px — blur radius
  • 100px — spread,
  • and rgba(255, 255, 255, .3) as the color.

… so I have to animate to a shadow defined with the same five values:

"0px 0px 80px 30px #fff"

Animating to a shadow written in the shorter ‘just x and y-offset and color’ form (also possible in CSS), would not work.

"0px 0px #fff"

By the way, in the Override example I applied the initial shadow inside Framer (and not in code). Which works if you use the same all five values’ notation.

export function Complex_values(): Override {
    return {
        animate: { background: "#4400FF", shadow: "0px 0px 80px 30px #fff" },
    }
}

📑 Supported Value Types, style, boxShadow

Which properties can you animate?

A bunch more properties can be animated, check the Animatable properties page for an overview.


2 comments on “The Animate property”

  • william.jm.harvey says:

    I noticed that the instant animation loads, it will go from the position on the canvas to the position in the override. But what is the best way to ignore the position in the canvas and use the initial value put in the data object instead?

    • Tes Mat says:

      Not sure which animation you’re referring to, but I’ll take the first one as an example.

      There are two ways:

      1. You just set the position properties (here left and top). They will be applied before the animation starts:

      import { Override, Data } from "framer"
      
      const data = Data({
          initialLeft: 200,
          initialTop: 200,
      })
      
      export function Animating_properties(): Override {
          return {
              left: data.initialLeft,
              top: data.initialTop,
              animate: {
                  left: 10,
                  top: 10,
                  scale: 0.5,
                  rotate: 45,
                  background: "Gold",
              },
              transition: { duration: 1 },
          }
      }
      

      2. You add an initial property. The animation will use the properties inside it as ‘from’ values.

      import { Override, Data } from "framer"
      
      const data = Data({
          initialLeft: 200,
          initialTop: 200,
      })
      
      export function Animating_properties(): Override {
          return {
              initial: { left: data.initialLeft, top: data.initialTop },
              animate: {
                  left: 10,
                  top: 10,
                  scale: 0.5,
                  rotate: 45,
                  background: "Gold",
              },
              transition: { duration: 1 },
          }
      }
      

Leave a Reply