Animate Color

Here’s a simple example demonstrating how to animate colors in Animare:

• Ensure that you animate from 0 to 1, as this range will be used to represent progress.
• Use AnimationInfo.value instead of AnimationInfo.progress because AnimationInfo.value accounts for the animation direction , whereas AnimationInfo.progress does not.

Animate Color

example

import animare from 'animare';
import { lerp, vecToRGB, ease } from 'animare/plugins';
import type { Vec3Array } from 'animare';

const circle = document.querySelector<HTMLDivElement>('.circle');
const fromColor: Vec3Array = [255, 0, 0];
const toColor: Vec3Array = [0, 255, 0];

animare.single({ from: 0, to: 1, duration: 1000, ease: ease.linear }, info => {
  if (!circle) return;
  const mixed = lerp(fromColor, toColor, info.value);
  const rgbString = vecToRGB(mixed);
  circle.style.backgroundColor = rgbString;
});