Animation » Using the animate() function

Using the animate() function

Having a layer, like for instance this circle…

tealCircle = new Layer
    size: 300
    borderRadius: 150
    backgroundColor: "#2DD7AA"

…we can simply call animate() on it with the properties we want to animate to.

Here we make the circle grow to 1.5x its size, while simultaneously turning it into a square and rotating it.

    borderRadius: 0
    scale: 1.5
    rotation: 180
Download Framer project

Note: animations like this can be added by right-clicking the layer in the Layer Panel or selecting it in the ‘Animate’ Auto-Code menu (top left).

The circle grows, rotates, and becomes a square

Then, optionally, you can add these options that change how the animation runs:

  • time : To set the duration of the animation.
  • delay : To have the animation wait before starting.
  • repeat : To have the animation run more iterations.
  • looping : To have the animation run indefinitely.
  • curve : To change how the animation moves over time.
  • colorModel : To change how to animate between colors.
  • instant : Can be set to yes to make the changes instantly (in other words: to not animate).

We’ll look at the first four now.

(The different animation curves (curve) and color models (colorModel) are explained further on.)