Animation

Animations change one or more properties of a layer over time. You’ll often trigger them with a ‘tap’ or other event.

What can be animated in Framer? A lot.

You’ll most often use: x, y, width, height, opacity, and scale, but any numerical property of a layer can be animated. This means that you can’t, for instance, animate visible, because that’s a Boolean, but you can animate opacity to have a layer fade in or out.

In addition to all numerical properties you can also animate color properties, like backgroundColor, shadowColor, borderColor, text color, and a few more things like shadows and gradients.

Anyway, there’s an overview of all the animatable properties at the end of this chapter.