# Animation Vocabulary > Source: > Published: 2026-06-13 04:22:37+00:00 A glossary of common animation patterns taught in the course. Use these names to describe what you want when prompting an AI. How elements appear and disappear. Fade in / Fade out — Element appears or disappears by changing opacity. Slide in — Element enters by sliding in from off-screen (left, right, top, or bottom). Scale in — Element grows from smaller to full size as it appears, often paired with a fade. Pop in — Element appears with a slight overshoot, like it bounces into place. Reveal — Content is uncovered gradually, often by animating a clip-path or mask. Enter / Exit — The animation an element plays when it’s added to or removed from the screen. Coordinating multiple elements or moments. Keyframes — Defined points in an animation (0%, 50%, 100%) that the browser fills the gaps between. Interpolation / Tween — Generating all the in-between frames between a start and end value, so motion is continuous. Stagger — Animate several items one after another with a small delay between each, creating a cascade. Orchestration — Deliberately timing multiple animations so they feel like one coordinated motion. Delay — Time before an animation starts. Duration — How long an animation takes. Fill mode — Whether an element keeps its first or last frame's styles before the animation starts or after it ends (e.g. forwards). Stepped animation — An animation that is divided into discrete steps, like a countdown timer. Changing an element’s position, size, or angle. Translate — Move an element along the X or Y axis. Scale — Make an element bigger or smaller. Rotate — Spin an element around a point. Skew — Slant an element along the X or Y axis, shearing it out of its rectangular shape. 3D tilt / Flip — Rotate in 3D space (rotateX / rotateY) to add depth. Perspective — How strong the 3D effect looks — a lower value exaggerates depth, like the viewer is closer. Transform origin — The anchor point a scale or rotation grows or spins from. Origin-aware animation — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS. Connecting one state, view, or element to another. Crossfade — One element fades out as another fades in, in the same spot. Continuity transition — A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller. Morph — One shape smoothly turns into another shape, e.g. Dynamic Island. Shared element transition — An element travels and transforms from one position into another, like a thumbnail expanding into a card. Layout animation — When an element’s size or position changes, it animates to the new spot instead of snapping. Accordion / Collapse — A section smoothly expands and collapses its height to show or hide content. Direction-aware transition — Content slides one way going forward and the opposite way going back, so navigation has a sense of direction. Motion tied to scrolling or navigating between views. Scroll reveal — Elements fade or slide into place as they enter the viewport. Scroll-driven animation — An animation whose progress is tied directly to scroll position. Parallax — Background and foreground move at different speeds while scrolling, creating depth. Page transition — An animation that plays when navigating from one page or route to another. View transition — The browser morphs between two states or pages, connecting shared elements. Responding to the user’s actions. Hover effect — Visual change when the cursor moves over an element. Press / Tap feedback — A subtle scale-down when an element is clicked, so it feels physical. Hold to confirm — A progress effect that fills up while the user holds a button. Drag — Moving an element by grabbing it, often with momentum when released. Drag to reorder — Dragging items in a list to rearrange them, while the others shift to make room. Swipe to dismiss — Dragging an element off-screen to close it, like a drawer or toast. Rubber-banding — Resistance and snap-back when you drag past a boundary (the iOS overscroll feel). Shake / Wiggle — A quick side-to-side jitter signaling an error or rejected input. Ripple — A circle expanding from the point of a tap, confirming the press. How speed changes over an animation. Easing — The rate at which an animation speeds up or slows down. Ease-out — Starts fast, ends slow. The default for most UI and anything responding to the user. Ease-in — Starts slow, ends fast. Usually avoided; can feel sluggish. Ease-in-out — Slow, fast, slow. Good for elements already on screen moving from A to B. Linear — Constant speed. Avoid for UI; reserve for spinners or marquees. Cubic-bezier — A custom easing curve you define for precise control. Asymmetric easing — A curve that accelerates and decelerates at different rates. Feels more alive than a symmetric one. Physics-based motion as an alternative to fixed-duration easing. Spring — Motion driven by physics (tension, mass, damping) rather than a set duration. Stiffness / Tension — How strongly the spring pulls toward its target. Higher feels snappier. Damping — How quickly a spring settles. Lower damping means more bounce and oscillation. Mass — How heavy the animated element feels. More mass makes it slower and more sluggish. Bounce — A spring that overshoots and settles, adding playfulness. Perceptual duration — How long a spring feels finished, even though it keeps micro-settling underneath. Momentum — Motion that carries velocity, especially after a drag or interruption. Velocity — How fast and in which direction an element is moving. A spring carries it into the next animation when interrupted, so a flicked element keeps its speed. Interruptible animation — An animation that can be smoothly redirected mid-flight instead of finishing first. Animations that run on their own. Marquee — Text or content that scrolls continuously in a loop. Loop — An animation that repeats, a set number of times or infinitely. Alternate (yoyo) — A loop that plays forward then reverses each iteration, instead of jumping back to the start. Orbit — An element circling around another in a continuous path. Pulse — A gentle repeating scale or opacity change to draw attention. Float — A gentle, continuous up-and-down drift that makes a static element feel alive and weightless. Idle animation — Subtle motion that plays while an element is just sitting there, waiting to be interacted with. The small touches that separate good from great. Blur — A blur filter used to soften an element or mask tiny imperfections. Clip-path — Clipping an element to a shape, used for reveals, masks, and before/after sliders. Mask — Hiding or revealing parts of an element using a shape or gradient — like clip-path, but with soft, fadeable edges. Before / after slider — A draggable divider that wipes between two overlaid images to compare them. Line drawing — An SVG path that draws itself in, like an invisible pen tracing it. Text morph — Text that animates character by character when it changes, drawing attention to the new value. Skeleton / Shimmer — A placeholder with a moving sheen shown while content loads. Number ticker — Digits rolling or counting up to a value. Tabular numbers — Fixed-width digits so numbers don’t shift around as they change. Essential for tickers, timers, and counters. Typewriter — Text appearing one character at a time, as if being typed. What keeps motion smooth instead of stuttering. Frame rate (FPS) — Frames drawn per second. 60fps is the baseline for smooth motion; 120fps on newer displays. Jank — Visible stutter when the browser drops frames because it can't keep up with the animation. Dropped frame — A frame the browser missed its deadline to draw, causing a tiny hitch in motion. Compositing — Letting the GPU move or fade an element on its own layer without redoing layout or paint. 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. Layout thrashing — Animating properties like width, height, top, or left that force the browser to recalculate layout every frame, causing jank. Concepts that guide when and how to animate. Purposeful animation — Motion should serve a function — orient, give feedback, show relationships — not just decorate. Anticipation — A small wind-up in the opposite direction before a move, hinting at what's about to happen. Follow-through — Parts of an element keep moving and settle slightly after the main motion stops, adding weight. Squash & stretch — Deforming an element as it moves to convey weight, speed, and flexibility. Perceived performance — The right animation makes an interface feel faster, even when it isn’t. Frequency of use — The more often a user sees an animation, the shorter and subtler it should be. Spatial consistency — Animating so an element keeps its identity and position across states, so users never lose track of where things went. Hardware acceleration — Animating transform and opacity lets the GPU keep motion smooth. Reduced motion — Respecting the user’s prefers-reduced-motion setting by toning down or removing motion. Join the waitlist to get **two free preview lessons ** and behind-the-scenes content every two weeks. **Enrollment opens on August 25th**, for 10 days.