Interruptible animation
Also called interruptible transition or animation retargeting
An animation that can change course mid-flight, continuing smoothly from its current position and speed when someone acts again before it ends.
import { useState } from 'react';
import { motion, useReducedMotion } from 'motion/react';
const SPRING = { type: 'spring', stiffness: 400, damping: 40 } as const;
export function SidebarLayout() {
const [open, setOpen] = useState(true);
const reduceMotion = useReducedMotion();
return (
<div className='relative h-96 overflow-hidden rounded-2xl border'>
<motion.aside
initial={false}
// Each click retargets the running spring from its current position
// and velocity, so rapid toggles reverse smoothly instead of jumping.
animate={{ x: open ? 0 : '-100%' }}
transition={reduceMotion ? { duration: 0 } : SPRING}
inert={!open}
className='absolute inset-y-0 left-0 z-10 flex w-64 flex-col gap-1 border-r bg-background p-3'
>
{['Projects', 'Templates', 'Settings'].map((item) => (
<a
key={item}
href={`/${item.toLowerCase()}`}
className='rounded-md px-3 py-2 text-sm hover:bg-muted'
>
{item}
</a>
))}
</motion.aside>
<button
type='button'
aria-expanded={open}
onClick={() => setOpen(!open)}
className='absolute right-3 bottom-3 rounded-md border bg-background px-3 py-2 text-sm font-medium hover:bg-muted'
>
{open ? 'Hide sidebar' : 'Show sidebar'}
</button>
</div>
);
}Make the sidebar open and close with a spring (stiffness 400, damping 40) in place of the CSS keyframe animation, so clicking the toggle again mid-animation reverses it smoothly from its current position and speed. Rapid clicks should never make it jump.
Paste into Layerwise or any AI coding tool.
What is Interruptible animation?
People rarely wait for animations to finish. They open a menu and close it right away, or tap a switch twice. An interruptible animation reacts at once: it turns around from wherever the element is and keeps its momentum, so the interface always feels responsive and never jumps.
Some techniques handle this better than others. A CSS keyframe animation restarts from its first keyframe when it is applied again, so the element jumps. A CSS transition reverses from the current value but drops the speed, so the turn can look abrupt. A spring redirects from the current position and velocity, which is why springs suit UI that responds to rapid input.
Make anything people trigger repeatedly interruptible: toggles, drawers, accordions, hover effects, and drag releases. Test by clicking fast and often. If the element ever snaps to a new position, the animation needs fixing.
Related terms
All termsSpring animation
An animation driven by simulated spring physics in place of a fixed duration and curve, so motion can overshoot, settle, and react naturally.
Velocity
The speed and direction an element already has when an animation starts, which a spring carries forward so a flick flows into what follows.
Keyframes
Snapshots that define how an element looks at set points in an animation. The browser fills in the motion between them.
Frequency of use
The rule that the more often people see an animation, the shorter and subtler it should be, so everyday actions never feel slow.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.