Squash and stretch
Stretching an object along its path when it moves fast and flattening it on impact, so it looks elastic and has weight.
import { motion, useReducedMotion } from 'motion/react';
const DROP = 150; // px
const SQUASH = { scaleX: 1.25, scaleY: 0.75 }; // wider as it gets shorter
const STRETCH = { scaleX: 0.9, scaleY: 1.15 }; // taller and thinner at speed
// One bounce per second: fall (ease-in), 80ms on the ground, rise (ease-out).
const TIMES = [0, 0.44, 0.46, 0.5, 0.54, 0.56, 1];
const bounce = {
y: [-DROP, -12, 0, 0, 0, -12, -DROP],
scaleX: [1, STRETCH.scaleX, 1, SQUASH.scaleX, 1, STRETCH.scaleX, 1],
scaleY: [1, STRETCH.scaleY, 1, SQUASH.scaleY, 1, STRETCH.scaleY, 1]
};
export function BouncingBall() {
const reduceMotion = useReducedMotion();
return (
<div className='flex h-56 items-end justify-center'>
<motion.div
animate={reduceMotion ? undefined : bounce}
transition={{
duration: 1,
times: TIMES,
ease: ['easeIn', 'linear', 'easeOut', 'easeIn', 'linear', 'easeOut'],
repeat: Infinity
}}
// Squash from the bottom so the ball stays planted on the floor.
className='size-12 origin-bottom rounded-full bg-blue-500'
/>
</div>
);
}Make the mascot ball bounce in a loop: fall 150px with an ease-in curve and rise with an ease-out curve, about 1 second per bounce. On impact, scale it to scaleX 1.25 and scaleY 0.75 from the bottom center for about 80ms, and stretch it to scaleY 1.15 just before and after contact. Show a still ball when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Squash and stretch?
Squash and stretch is often called the most important of the 12 principles of animation. A bouncing ball stretches tall as it falls, flattens wide when it hits the floor, and stretches again as it takes off. Its volume stays about the same: when it gets shorter, it also gets wider.
In interfaces, use a light touch: a button that squashes slightly when pressed, an icon that stretches as it jumps, a toggle knob that widens as it slides, or a playful loading ball. A 5 to 15 percent change is plenty for UI; cartoon-sized squash suits mascots, games, and onboarding illustrations.
Set transform-origin to the side that touches the surface, the bottom for a bounce, so the object stays planted while it squashes. Change scaleX and scaleY in opposite directions, keep the effect off text, which just looks distorted, and drop it when prefers-reduced-motion is set.
Related terms
All termsAnticipation
A small move in the opposite direction just before the main action, like crouching before a jump, so the motion that follows reads clearly.
Follow-through
When the main object stops but loose, attached parts keep moving for a moment, swing past, and settle, which makes motion feel physical.
Scale
A CSS transform that draws an element larger or smaller around its transform origin, without pushing neighboring elements.
Transform origin
The point an element rotates and scales around. It defaults to the center, and moving it changes where a transform seems to start.
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.