anime.js logo v4 Anime.js | JavaScript Animation Engine

Animation Tween value types

Since 4.0.0

Color function value WAAPI

The CSS color() function can be animated with the WAAPI animate() method.

Accepts

Any valid CSS color space syntax is supported

Color function value code example

import { waapi } from 'animejs';

waapi.animate('.circle',  {
  backgroundColor: 'color(display-p3 1.0 0.267 0.267 / 1.0)',
});
<div class="large justified row">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
Previous Next