duration
Defines the duration in milliseconds of all animated layout elements.
Compatible with the stagger() utility function.
Accepts
Numberequal to or greater than0- Function based value that returns a
Numberequal to or greater than0
Default
350
duration code example
import { createLayout, utils } from 'animejs';
const [ $rootA, $rootB ] = utils.$('.layout-container');
const [ $buttonA, $buttonB ] = utils.$('.controls button');
const layoutA = createLayout($rootA);
const layoutB = createLayout($rootB, { duration: 1000 });
function animateLayoutA() {
layoutA.update(({ root }) => root.classList.toggle('row'));
}
function animateLayoutB() {
layoutB.update(({ root }) => root.classList.toggle('row'));
}
$buttonA.addEventListener('click', animateLayoutA);
$buttonB.addEventListener('click', animateLayoutB);
<div class="large layout centered row">
<div class="layout-container col grid-layout row">
<div class="item col">default</div>
<div class="item col">duration</div>
</div>
<div class="layout-container col grid-layout row">
<div class="item col">1000ms</div>
<div class="item col">duration</div>
</div>
</div>
<div class="medium row">
<fieldset class="controls">
<button class="button">Animate default</button>
<button class="button">Animate 1000ms</button>
</fieldset>
</div>