update()

One-call helper that runs record(), executes your DOM mutations, and calls animate() with optional overrides.

This might not work in some frameworks (I haven't tested all of them).
Use the manual record() / .animate() combo if the animation doesn't work with .update().

Parameters

A callback Function to update the layout
An optional Object of animation parameters to override default layout timing and easing for this specific transition.

Returns

Timeline

update() code example

import { createLayout, utils } from 'animejs';

const [ $button ] = utils.$('.controls button');

const layout = createLayout('.layout-container');

function animateLayout() {
  // Triggers both layout.record() and layout.animate()
  layout.update(() => {
    const first = layout.root.firstElementChild;
    if (first) layout.root.append(first);  
  }, {
    duration: 750,
    ease: 'out(4)',  
  });
}

$button.addEventListener('click', animateLayout);

<div class="large layout centered row">
  <div class="layout-container col grid-layout row">
    <div class="item col">Item 1</div>
    <div class="item col">Item 2</div>
    <div class="item col">Item 3</div>
  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">update()</button>
  </fieldset>
</div>

Previous Next