ease
Sets the default easing curve or spring applied to every animation during a layout transition.
Accepts
- An easing
Function - A built-in ease
String - A Function based value that returns an easing
Functionor a built-in easeString
Default
'inOut(3.5)'
ease code example
import { createLayout, utils, spring } from 'animejs';
const [ $buttonA, $buttonB ] = utils.$('.controls button');
const layout = createLayout('.layout-container', {
ease: 'outExpo'
});
function animateLayout(ease) {
// You can override the layout default ease in the update() method parameters
layout.update(({ root }) => root.classList.toggle('row'), { ease });
}
const animateWith500MsDelay = () => animateLayout();
const animateWithStaggerDelay = () => animateLayout(spring());
$buttonA.addEventListener('click', animateWith500MsDelay);
$buttonB.addEventListener('click', animateWithStaggerDelay);
<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>
</div>
<div class="medium row">
<fieldset class="controls">
<button class="button">'outExpo'</button>
<button class="button">spring()</button>
</fieldset>
</div>