Animation composition

Overview

The animation composition property specifies how animations should blend or override each other. For example, if two animations target the same CSS property like opacity or transform, the animation composition helps you to define if the second animation should override the first, or if both animations should be applied together. Its values include options such as replace (default), where later animations override earlier ones, or add (+) and reduce (-), where the effect is added or reduced from the currently running animation. This feature gives developers finer control over complex animations.

Note: Composition works only with number values.

Replace

By default, the later applied trigger will replace the animation automatically.

Add

To add a value into the currently running animation, use (+) before the value you want to add.

Reduce

To reduce a value into the currently running animation, use (-) before the value you want to reduce.

Combination

You can combine multiple compositions without limitation. In this example, scroll:s(2) serves as the base animation, to which other compositions are applied. The scroll trigger animates the element from 1 to 2 as the user scrolls. Simultaneously, the animate trigger creates an infinite loop that reduces the scale by 0.5 from the value controlled by the scroll trigger. When you hover over the element, its scale increases slightly by adding 0.5 to the current scale. Finally, when you click and hold, the active trigger replaces all previous values, setting the scale to 1.