Animation composition

Overview

The animation composition property specifies how different animations should blend or override each other when they affect the same CSS property. It provides finer control over complex animations, allowing you to define whether a later animation should override an earlier one or whether both animations should be applied together. This feature is useful for fine-tuning complex animations and creating layered effects.

Composition works only with number values.

Syntax

The syntax for the add (+) and reduce (-) composition is as follows:

• add (+): Adds the effect of the new animation to the current one.
• reduce (-): Reduces the effect of the current animation by the specified value.

Replace

By default, when multiple triggers affect the same property, the later applied trigger will replace the previous animation.

Add

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

Reduce

To reduce the effect of a currently running animation, use the (-) sign before the value you want to subtract.

Combination

You can combine multiple compositions to create more complex animations. In this example, the scroll trigger animates the element’s scale from 1 to 2 as the user scrolls. The animate trigger creates an infinite loop, reducing the scale by 0.5. When the element is hovered, its scale increases by adding 0.5. Finally, when the element is clicked and held, the active trigger replaces all previous values, setting the scale to 1.