Animation

The animate() function is the core of SZZ Labs. It animates CSS properties, SVG attributes, DOM attributes, and JS objects.

Basic Usage

import { animate } from 'animejs';

animate('.target', {
  translateX: 100,
  opacity: [0, 1],
  duration: 800,
  ease: 'outExpo',
  delay: 200,
});

Keyframes

Define multiple animation states using keyframe arrays.

animate('.box', {
  translateX: [0, 100, 50, 200],
  opacity: [1, 0.5, 1],
  duration: 2000,
});

Per-Property Parameters

animate('.box', {
  translateX: { to: 200, duration: 600, ease: 'outBounce' },
  rotate: { to: 360, duration: 1200, ease: 'linear' },
  opacity: { to: 0.5, duration: 400 },
});

Parameters