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"
    point: Align.center

…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.

tealCircle.animate
    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.)