record()
Record a layout snapshot that will be used as the initial state of the next animation created with animate().
Returns
AutoLayout
record() code example
import { createLayout, utils } from 'animejs';
const [ $button ] = utils.$('.controls button');
const layout = createLayout('.layout-container');
function animateLayout() {
// Record the current state of the layout
layout.record();
// Update the layout state
const first = layout.root.firstElementChild;
if (first) layout.root.append(first);
// Animate to the new state
layout.animate();
}
$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">record() + animate()</button>
</fieldset>
</div>