Glossary · Animation
Color animation
Gradual change of the color of a fill, a stroke, a text, or a background while the banner plays.
In detail
Animating color means moving from one tone to another with a smooth transition instead of a jump. It helps draw attention to a price, highlight a button, or accompany a change in message.
BannerMotion has two movements: “Change color” (goes from one color to another and stays at the end) and “Color pulse” (goes and comes back, one to three times). Colors can be names from the brand palette or #RRGGBB, #RRGGBBAA, or oklch() values. Because the color is repainted during the movement, use it sparingly.
Example
The button changes from the brand blue to the offer orange in 400 ms.
Related terms
Where it appears
[This term does not appear in any guide yet.]