States parameters

Defines properties applied to elements during specific transition phases: entering the layout, leaving the layout, or swapping position.

import { createLayout } from 'animejs';

createLayout('.layout-container', {
  children: '.item',
  duration: 350,
  delay: 0,
  ease: 'inOut(3.5)',
  properties: ['boxShadow'],
┌─────────────────────────────┐
│ enterFrom: { opacity: 0 },  │
│ leaveTo: { opacity: 0 },    ├─ State Parameters
│ swapAt: { opacity: 0 },     │
└─────────────────────────────┘
  onBegin: () => {},
  onUpdate: () => {},
  onComplete: () => {},
}).then(() => {});

Each parameter accepts an Object of CSS properties with optional delay, duration, and ease overrides.

After calling layout.update() or layout.animate(), corresponding element arrays are available on the layout instance:

These arrays are cleared and repopulated on each .animate() call.