Transitions

The Concerto Frontend supports various transitions through the use of field configs.

By default, content will use a fade in transition upon entry and a fade out transition upon exit.

Supported transitions

Here is a list of supported transitions that can be used on entry and/or exit:

• fade-in-animation Animates opacity from 0 to 1.
• fade-out-animation Animates opacity from 1 to 0.
• scale-down-animation Animates transform from scale(1) to scale(0).
• scale-up-animation Animates transform from scale(0) to scale(1).
• slide-down-animation Animates transform from translateY(-100%) to none.
• slide-up-animation Animates transform from none to translateY(-100%).
• slide-left-animation Animates transform from none to translateX(-100%);
• slide-right-animation Animates transform from none to translateX(100%);
• slide-from-left-animation Animates transform from translateX(-100%) to none;
• slide-from-right-animation Animates transform from translateX(100%) to none;
• transform-animation Animates a custom transform.

Adding the field configs

Add the entry_transition and exit_transition as the config key under Concerto. Set the value of these keys to any of the animations mentioned above.