Swap parent animation
Automatically animates children elements being moved from one parent to another.
Swap parent animation code example
import { createLayout, utils } from 'animejs';
const [ $button ] = utils.$('.controls button');
const layout = createLayout('.layout');
function animateLayout() {
layout.update(({ root }) => {
const $child = root.querySelector('.item');
const $parent = $child.parentElement;
const $nextParent = $parent.nextElementSibling || $parent.previousElementSibling;
$parent.style.zIndex = '0';
$nextParent.style.zIndex = '1';
$nextParent.appendChild($child);
})
}
$button.addEventListener('click', animateLayout);
<div class="large layout centered row">
<div class="layout-container container-a col grid-layout row">
<div class="item col">Item A</div>
</div>
<div class="layout-container container-b col grid-layout row">
</div>
</div>
<div class="medium row">
<fieldset class="controls">
<button class="button">Swap parent</button>
</fieldset>
</div>
#layout-usage-swap-parent-animation .container-b {
flex: 2;
}