DOM order change animation
Automatically animates DOM order changes.
DOM order change animation code example
import { createLayout, utils } from 'animejs';
const [ $button ] = utils.$('.controls button');
const layout = createLayout('.layout-container');
function animateLayout() {
layout.update(({ root }) => {
const items = [...root.querySelectorAll('.item')];
utils.shuffle(items).forEach($el => root.appendChild($el))
});
}
$button.addEventListener('click', animateLayout);
<div class="large layout centered row">
<div class="layout-container row">
<div class="item col">A</div>
<div class="item col">B</div>
<div class="item col">C</div>
<div class="item col">D</div>
<div class="item col">E</div>
<div class="item col">F</div>
<div class="item col">G</div>
</div>
</div>
<div class="medium row">
<fieldset class="controls">
<button class="button">Shuffle</button>
</fieldset>
</div>