Reuse Animated Value

The fewer animations in the timeline, the better the performance. When animating multiple CSS properties with the same duration and start time, you don’t need to create a new animation for each property.

• Ensure that you animate from 0 to 1, as this range represents the progress.
• Use AnimationInfo.value instead of AnimationInfo.progress because AnimationInfo.value accounts for the animation direction , whereas AnimationInfo.progress does not.
• Do not pass an easing function; leave it as the default so you can assign one to each css property.

Reuse Values

animare

example

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

const letters = document.querySelectorAll<HTMLSpanElement>('.letters');

const animations: AnimationGroupOptions = {
  to: Array<number>(letters.length).fill(1), // create an animation for each element
  // offset each animation except the first one to play early by 300ms
  offset: i => (i === 0 ? 0 : -300),
  duration: 500, // for each animation
};

animare.group(animations, info => {
  for (let i = 0; i < letters.length; i++) {
    const letter = letters[i];
    if (!letter) return;

    // represents the progress of the animation
    const t = info[i].value;

    // opacity
    letter.style.opacity = t.toString();

    // blur
    const blur = lerp(3, 0, t);
    letter.style.filter = `blur(${blur}px)`;

    // rotate
    const rotate = lerp(i % 2 === 0 ? 90 : -90, 0, ease.out.back(5)(t));
    letter.style.rotate = `${rotate}deg`;

    // scale
    const scale = lerp(2, 1, ease.in.wobble(1.6)(t));
    letter.style.scale = `${scale}`;
  }
});