Animation » Three ways to animate

Three ways to animate

Animations in Framer can be created in three different ways. You’ll end up using all of them, depending on what you want to accomplish at a given time.

  1. The animate() function
    This is the fire and forget option. The animation starts when you call animate() on the layer.
  2. The Animation object
    Animation objects give you more control. You can set up animations before triggering them, create reverse animations, and chain animations—triggering a second animation once the first one ends.
  3. Animating between states
    A ‘state’ is a set of alternative properties for a layer. A menu layer, for example, could have ‘open’ and ‘closed’ states. Once these states are defined, you can animate between them. States are explained in the next chapter.