Animation States

Animation states allow you to animate changes to modules with tweens. You can any number of Animation States.

Creating an Animation State

To create an animation state, select any module in the Page Builder. On the sidebar, scroll down to Animation States.

Animation States section in sidebar

To add a state, click Add Item. Give the state a name.

Click Edit Tween Options to open the State Editor modal.

State Editor modal window

In here, you can enter the overrides you want for this Animation State. The system makes use of the Framer Motion library, and your overrides should follow the expected format for variants.

Example Variant JSON

Once you've entered your JSON, click Done.

Initial State

You can set an Animation State as the initial state of your module. If set, Backstage will apply that Animation State by default.