Motion makes it simple to animate an element's size and position between different layouts. With animateLayout and the data-layout prop, you can perform layout animations, and by using data-layout-id you can create seamless "magic motion" effects between two separate elements.
Layout animations can animate previously unanimatable CSS values, like switching justify-content between flex-start and flex-end.
animateLayout(() => {
element.style.justifyContent = isOn ? "flex-start" : "flex-end"
})Install
animateLayout is in early access. You need to be a Motion+ member to install.
First, add the motion-plus package to your project using your private token.
npm install "https://api.motion.dev/registry.tgz?package=motion-plus&version=2.6.1&token=YOUR_AUTH_TOKEN"Once installed, animateLayout can be imported via motion-plus/animate-layout.
animateLayout requires motion@12.29.2 or above.
Once out of alpha, animateLayout will be imported from the main "motion" package.
Usage
Import animateLayout from "motion-plus/animate-layout".
import { unstable_animateLayout as animateLayout } from "motion-plus/animate-layout"Wrap any layout change with animateLayout:
animateLayout(() => {
document.getElementById("box").style.width = "500px"
})Any elements tagged with a data-layout will animate to their new size and position.
<div id="toggle-handle" data-layout />Configure transitions
Pass a Motion transition to animateLayout to configure the animation.
animateLayout(update, { type: "spring" })Scope layout animations
We can scope layout animations to a specific part of a page by passing a selector or element(s) as the first argument:
// Either as a selector
animateLayout(".container", update)
// Or an element/element list
const container = document.getElementById("#container")
animateLayout(container, update)