Fade in / Fade out
The element appears or disappears by changing opacity.
A toast notification that appears and fades away on its own.
The Animation Vocabulary
The dictionary of the most common animation patterns: use these names to describe to the AI the motion you want when you do vibe coding. Every entry has a live preview.
Inspired by the excellent work of Emil Kowalski · animations.dev, with a preview added to every entry.
The same vocabulary also exists as a skill you can install in your agent: here you look the names up, there it already knows them.
91 terms
Enters and exits
How elements appear and disappear.
Slide in
The element slides in from off-screen (from the left, right, top, or bottom).
A side panel that slides in from the right on click.
Scale in
The element grows from small to full size as it appears, often paired with a fade.
A card that grows as it opens its detail view.
Pop in
The element appears with a slight overshoot, as if it bounced into place.
A new-notification badge that pops in playfully.
Reveal
The content is gradually uncovered, often by animating a clip-path or a mask.
A hero image that reveals itself from left to right.
Enter / Exit
The animation an element plays when it's added to or removed from the screen.
List items that enter and exit as you filter.
Sequencing and timing
Coordinating multiple elements or moments.
Keyframes
Defined points in an animation (0%, 50%, 100%) that the browser fills in between.
A logo that bounces between several defined poses.
Interpolation / Tween
Generating every in-between frame between a start and end value, so the motion is continuous.
A progress bar that glides smoothly to its target.
Stagger
Animating multiple elements one after another with a small delay between each, creating a cascade.
Menu items that appear one after another.
Orchestration
Deliberately timing multiple animations so they read as one coordinated movement.
Hero, title, and CTA entering in a coordinated sequence.
Delay
The time before an animation starts.
A tooltip that appears after half a second's wait.
Duration
How long an animation lasts.
A slow, soft accordion instead of an instant one.
Fill mode
Whether an element keeps the styles of its first or last frame before or after the animation (e.g. forwards).
An element that stays in its final position once the animation ends.
Stepped animation
An animation split into discrete steps, like a countdown timer.
A countdown that jumps second by second.
Movement and transforms
Changing an element's position, size, or angle.
Translate
Moving an element along the X or Y axis.
A button that shifts over to make room for a menu.
Scale
Making an element bigger or smaller.
A thumbnail that grows on hover.
Rotate
Rotating an element around a point.
A menu icon that rotates into an X.
Skew
Tilting an element along the X or Y axis, distorting it out of its rectangular shape.
A promo banner tilted for extra energy.
3D tilt / Flip
Rotating in 3D space (rotateX / rotateY) to add depth.
A card that flips to show its back.
Perspective
How strong the 3D effect looks: a low value exaggerates depth, as if the viewer were standing closer.
A cover that tilts in 3D as it follows the cursor.
Transform origin
The anchor point a scale or rotation grows or turns from.
A tooltip that grows from its corner instead of its center.
Origin-aware animation
The element animates starting from whatever triggered it, like a popover that grows from the button that opened it instead of from its own center.
A popover that bursts open from the button that triggered it.
Transitions between states
Connecting one state, view, or element to another.
Crossfade
One element fades out while another fades in, in the same spot.
Two gallery photos dissolving into each other.
Continuity transition
A change that keeps the user oriented by visually linking before and after, for example growing and shrinking the same rectangle.
A card that expands while keeping its shape.
Morph
A shape smoothly transforms into another, like the Dynamic Island.
The Dynamic Island widening for an incoming call.
Shared element transition
An element travels and transforms from one position to another, like a thumbnail expanding into a full card.
A thumbnail that becomes the full-screen cover.
Layout animation
When an element's size or position changes, it animates to the new spot instead of snapping there.
Grid cards that reposition themselves when reordered.
Accordion / Collapse
A section smoothly expands and collapses its height to show or hide content.
An FAQ that opens and closes its answer.
Direction-aware transition
Content slides one way going forward and the opposite way going back, giving navigation a sense of direction.
Slides that move forward or back depending on the key pressed.
Scroll
Motion tied to scrolling or to navigating between views.
Scroll reveal
Elements fade or slide into place as they enter the viewport.
Sections appearing as you scroll down the landing page.
Scroll-driven animation
An animation whose progress is tied directly to the scroll position.
A reading-progress bar that fills as you scroll.
Parallax
Background and foreground move at different speeds while scrolling, creating depth.
A background that scrolls slower than the foreground.
Page transition
An animation that plays when navigating from one page or route to another.
A crossfade between one page and the next.
View transition
The browser morphs between two states or pages, linking their shared elements.
An article that opens from its preview in the feed.
Feedback and interaction
Responding to the user’s actions. (Hover over the previews.)
Hover effect
A visual change when the cursor passes over an element.
A button that lights up on hover.
Press / Tap feedback
A slight shrink on click, so the element feels physical.
A key that presses down slightly on click.
Hold to confirm
A progress effect that fills up while the user holds down a button.
A 'Delete' button you hold down to confirm.
Drag
Moving an element by grabbing it, often with inertia on release.
A photo you drag to move it on the canvas.
Drag to reorder
Dragging items in a list to reorder them, while the others shift to make room.
A to-do list you reorder by dragging its items.
Swipe to dismiss
Dragging an element off-screen to dismiss it, like a drawer or a toast.
A notification you dismiss by swiping it away.
Rubber-banding
Resistance and an elastic snap-back when you drag past a limit (the iOS overscroll feel).
A list that bounces back when you scroll past the bottom.
Shake / Wiggle
A quick side-to-side wobble that signals an error or a rejected input.
A password field that shakes when the password is wrong.
Ripple
A circle that expands from the point of touch, confirming the press.
The wave that spreads out from where you tap a button.
Easing
How speed changes over the course of an animation.
Easing
The rhythm with which an animation speeds up or slows down.
A menu that starts fast and eases gently to a stop.
Ease-out
Starts fast, ends slow. The default for most UI and for anything responding to the user.
A panel that enters fast and settles calmly.
Ease-in
Starts slow, ends fast. Usually avoided: it can feel sluggish.
An element that exits the scene picking up speed.
Ease-in-out
Slow, fast, slow. Good for elements already on screen moving from A to B.
A box that glides smoothly from one side to the other.
Linear
Constant speed. Avoid it in UI; reserve it for spinners or marquees.
A spinner turning at a constant speed.
Cubic-bezier
A custom easing curve you define for precise control.
A custom transition with a small overshoot.
Asymmetric easing
A curve that speeds up and slows down at different rates. It reads as more alive than a symmetric one.
A movement that starts slow and brakes sharply.
Spring animations
Physics-based motion, an alternative to fixed-duration easing.
Spring
Motion driven by physics (tension, mass, damping) instead of a fixed duration.
A panel that enters with a natural bounce.
Stiffness / Tension
How strongly the spring pulls toward its target. Higher means snappier.
A snappy menu that reaches its position instantly.
Damping
How quickly a spring settles. Low damping means more bounce and oscillation.
A toggle that wobbles briefly before settling.
Mass
How heavy the animated element feels. More mass makes it slower and lazier.
A heavy element that moves slow and deliberate.
Bounce
A spring that overshoots its target and settles back, adding playfulness.
An emoji that lands on screen with a bounce.
Perceptual duration
How finished a spring feels, even while it's still micro-settling underneath.
A spring that looks still but is still settling.
Momentum
Motion that carries its velocity forward, especially after a drag or an interruption.
A list that keeps scrolling after the swipe.
Velocity
How fast and in what direction an element is moving. A spring carries it into the next animation when interrupted.
A flicked element that keeps its momentum.
Interruptible animation
An animation that can be smoothly redirected midway instead of finishing first.
A menu that changes course if you close it halfway.
Loops and ambient motion
Animations that run on their own.
Marquee
Text or content that scrolls continuously in a loop.
A strip of client logos scrolling continuously.
Loop
An animation that repeats, either a set number of times or forever.
A loading icon that spins forever.
Alternate (yoyo)
A loop that runs forward then backward on each cycle, instead of snapping back to the start.
A 'scroll down' arrow that moves up and down.
Orbit
An element circling around another along a continuous path.
Dots orbiting around a loader.
Pulse
A gentle, repeated change in scale or opacity to draw attention.
A notification dot that pulses to catch the eye.
Float
A slow, continuous up-and-down drift that makes a static element feel alive and light.
An illustration floating lightly in the hero.
Idle animation
Subtle motion that plays while an element just sits there, waiting to be interacted with.
A character breathing while it waits for input.
Finishing touches and effects
The small touches that separate good from great.
Blur
A blur filter used to soften an element or hide small imperfections.
The background blurring when you open a modal.
Clip-path
Clipping an element into a shape, used for reveals, masks, and before/after sliders.
A diamond-clipped image that changes shape.
Mask
Hiding or revealing parts of an element with a shape or gradient — like clip-path, but with soft, fadeable edges.
Text revealed by a sheen passing over it.
Before / after slider
A draggable divider that transitions between two overlapping images so you can compare them.
A before/after comparison of a retouched photo.
Line drawing
An SVG path that draws itself, as if traced by an invisible pen.
A signature or icon that draws itself.
Text morph
Text that animates character by character as it changes, drawing attention to the new value.
A price that changes with its digits animating.
Skeleton / Shimmer
A placeholder with a moving sheen, shown while the content loads.
Shimmering placeholders while the feed loads.
Number ticker
Digits that spin or climb up to a value.
A subscriber counter climbing up to its total.
Tabular numbers
Fixed-width digits so numbers don't jump around as they change. Essential for tickers, timers, and counters.
A timer that doesn't jitter as its numbers change.
Typewriter
Text that appears one character at a time, as if being typed.
A headline typed out character by character.
Performance
What keeps motion smooth instead of janky.
Frame rate (FPS)
Frames drawn per second. 60fps is the baseline for smooth motion; 120fps on newer displays.
Smooth motion at 60fps with no stutter.
Jank
Visible stutter when the browser drops frames because it can't keep up with the animation.
The stutter you want to avoid when an animation struggles to keep up.
Dropped frame
A frame the browser failed to draw in time, causing a small hiccup in the motion.
The hiccup when the browser skips a frame.
Compositing
Letting the GPU move or fade an element on its own layer without redoing layout or paint.
Moving an element via the GPU without repainting.
will-change
A CSS hint that an element is about to animate, so the browser can promote it to its own layer ahead of time.
Warning the browser that a menu is about to open.
Layout thrashing
Animating properties like width, height, top, or left, which force the browser to recompute layout every frame, causing jank.
The mistake of animating width instead of transform.
Principles worth knowing
Concepts that guide when and how to animate.
Purposeful animation
Motion should serve a function — orienting, giving feedback, showing relationships — not just decorate.
An animation that guides the eye, not just decorates.
Anticipation
A small wind-up in the opposite direction before a movement, hinting at what's about to happen.
A small wind-up before an element launches.
Follow-through
Parts of an element keep moving and settle slightly after the main motion stops, adding weight.
A tail that keeps moving after everything else stops.
Squash & stretch
Distorting an element as it moves to convey weight, speed, and flexibility.
A ball that squashes as it bounces.
Perceived performance
The right animation makes an interface feel faster, even when it isn't.
A skeleton screen that makes loading feel faster.
Frequency of use
The more often a user sees an animation, the shorter and subtler it should be.
A short animation because you see it a thousand times a day.
Spatial consistency
Animating so an element keeps its identity and position across states, so the user never loses track of where things are.
A menu that always returns to where it came from.
Hardware acceleration
Animating transform and opacity lets the GPU keep the motion smooth.
Animating transform and opacity to stay smooth.
Reduced motion
Respecting the user's prefers-reduced-motion setting by toning down or removing motion.
Turning off motion for people who get motion sickness.
No animation found
Try another term, like "spring", "fade" or "scroll".
Keep exploring
You might also like
Guides, courses and tools picked for you, starting from this page.
Guide
Google Search Console inside Claude Code
Search Console data inside your terminal.
Course
Deploy From Scratch: From Code to Link
Deploy on Vercel with no jargon: turn the project sitting on GitHub into a public link you can send anyone, then add your own domain on top.
Asset
+7 Clear Brief
The sheet to bring to the call
Guide
From a Confusing Brief to a Complete UX/UI
A vague brief becomes a navigable app.
Course
Git and GitHub for Vibe Coders
Built a project with Claude Code or Codex? Learn to put it on GitHub, roll back changes when things break, and bring other people in to help.
Asset
+3 Design Skills
AI skills for designers