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.