Animation & Effects Encyclopedia
70+ web effects — named, explained, and demonstrated live.
Hover, click, and scroll
to learn them all.
Now with Lenis smooth scroll, SVG, and premium agency effects.
Smooth property changes between two states. Hover over each card to trigger the effect.
Changes opacity from 0 to 1 (or vice versa). The most basic way
to make elements appear/disappear smoothly.
Moves an element using transform: translateX/Y. Used for menus,
panels, and reveal animations.
Grows or shrinks an element with transform: scale(). Great for
hover effects on cards and buttons.
Spins an element using transform: rotate(). Can rotate on X, Y,
or Z axis for 3D effects.
Shears an element diagonally with transform: skew(). Creates
italic-like distortion.
Smoothly changes background-color or color.
Foundation of all hover color changes.
Transitions border-radius to morph shapes — square to circle,
blob shapes, etc.
Multi-step animations defined with @keyframes. These run automatically
and can loop infinitely.
Element bounces up and down with easing. Uses translateY with
custom timing to simulate gravity.
Rhythmic scaling that looks like breathing. Commonly used for notification badges and call-to-action buttons.
@keyframes · scaleRapid horizontal jittering. Used for error states, form validation, and attention-grabbing UI.
@keyframes · translateXPendulum-like rotation from the top. Uses
transform-origin: top center as the pivot point.
3D card flip on the Y axis. Uses perspective and
rotateY(180deg) with backface-visibility.
Gentle up-and-down hovering motion. Subtle and dreamy — used for hero illustrations and floating elements.
@keyframes · translateY · ease-in-outContinuous 360° rotation. The classic loading spinner effect. Uses
linear timing for constant speed.
Modern visual treatments and design styles that define contemporary web aesthetics.
Frosted glass look with backdrop-filter: blur().
Semi-transparent background + blur = glass. Used everywhere in modern UI.
Soft, extruded look using inset and outset shadows on similar-colored backgrounds. Looks like pressed clay.
box-shadow · inset · light/dark shadowsShifting, animated multi-color gradients. Uses oversized
background-size and animates background-position.
Stacking multiple box-shadow values creates realistic depth and
elevation. Key to Material Design and modern cards.
Masks elements into custom shapes using clip-path. Can create
circles, polygons, and complex SVG paths.
Image-like processing: blur(), brightness(),
contrast(), hue-rotate(), saturate(). Like Instagram
filters in CSS.
Blends overlapping elements like Photoshop layers. Modes:
multiply, screen, overlay, difference.
Typography-focused animations and visual treatments that make text come alive.
Characters appear one by one with a blinking cursor. Uses
steps() timing or JS interval to reveal each character.
Digital corruption effect using ::before and
::after pseudo-elements with clip-path offset. Cyberpunk vibes.
Glowing text with pulsing luminance. Stacks multiple text-shadow
values with increasing blur radius.
Color gradient applied to text using background-clip: text with
-webkit-text-fill-color: transparent.
Each letter animates in individually with staggered delay. Foundation of premium text reveal animations in GSAP.
animation-delay · var(--i) · staggerRandom characters cycle before resolving to the final text. Matrix / hacker aesthetic. Done with JS intervals.
JavaScript · setInterval · random charsSVG text outline draws in progressively. Uses stroke-dasharray
and stroke-dashoffset animation.
Effects triggered by scrolling. Powered by GSAP ScrollTrigger — the industry standard for scroll animation.
Element goes from invisible to visible as it enters the viewport. The most common scroll animation.
ScrollTrigger · opacity · fromToBackground layers move at different speeds than foreground, creating depth illusion. Scroll-linked movement.
ScrollTrigger · scrub · different speedsMultiple elements animate in with sequential delay. Creates a cascade/wave
effect. GSAP's stagger property.
Element grows or shrinks proportional to scroll position. Uses
scrub: true for scroll-linked animation.
Text slides up from behind a mask/clip as the user scrolls. Used on premium agency websites for elegant reveals.
overflow: hidden · translateY · ScrollTriggerVisual indicator of how far the user has scrolled. Width or height grows from 0% to 100% based on scroll position.
ScrollTrigger · scaleX · scrubNumbers count up from 0 when scrolled into view. Common on stats/achievement sections. JS-driven animation.
ScrollTrigger · onUpdate · number formattingInteractive effects driven by mouse position. Move your cursor inside each demo area.
Replaces the default arrow with a custom-designed cursor (dot + ring). Uses
mousemove to position a div at cursor coords.
Elements trail behind the cursor with decreasing speed. Each follower uses
progressively more lerp (linear interpolation).
Button pulls toward the cursor when nearby. Calculates distance and applies
proportional translate. Premium interaction.
Card rotates in 3D based on mouse position. Uses perspective +
rotateX/Y calculated from cursor offset.
Expanding circle from the click point. Material Design signature. Creates a
span at click coords with scale animation.
Mouse reveals hidden content beneath a dark overlay. Uses
radial-gradient mask that follows the cursor position.
Small, satisfying interactive elements that make UI feel polished. The details that separate good from great.
Underline slides in from left on hover using ::after
pseudo-element with scaleX transform.
3D push effect on click using translateY and
box-shadow changes. Feels like pressing a physical button.
Animated on/off toggle. Uses a hidden checkbox + styled ::before
pseudo that slides with translateX.
Various loading indicators: spinning ring (border), bouncing dots, equalizer bars. Each uses different keyframe techniques.
border · @keyframes · animation-delayInfo popup that appears on hover. Uses ::after for content from
data-tooltip attribute, ::before for the arrow.
This content smoothly expands using max-height and transition. The key trick is transitioning to a large max-height value.
Smooth expand/collapse panel. Transitions max-height from 0 to a
set value. Classic FAQ and menu pattern.
Advanced 3D effects rendered in the browser using Three.js and WebGL. GPU-accelerated real-time graphics.
Transparent 3D sphere that refracts/distorts what's behind it. Uses Three.js
MeshPhysicalMaterial with transmission and ior.
Thousands of floating 3D points creating an atmospheric field. Uses
Points geometry with custom vertex positions and mouse interaction.
3D geometry warps and deforms with perlin-noise displacement. Vertices are animated per-frame for organic, fluid motion.
Three.js · vertex displacement · noise · geometryScalable Vector Graphics unlock path animations, shape morphing, and line drawing effects impossible with regular HTML.
Paths appear to "draw" themselves using stroke-dasharray and
stroke-dashoffset. Set dasharray to path length, then animate offset from length to
0.
Shape smoothly transforms into another shape by animating the d
attribute between two SVG path definitions. GSAP MorphSVG or CSS can do this.
Individual SVG lines animate in with staggered delays. Each line uses its own
stroke-dasharray animation with a calc()-based delay.
Content revealed through an expanding SVG clipPath. The clip
shape (circle, polygon) animates from small to full, revealing content beneath.
The "gooey" / metaball effect. SVG filter combines
feGaussianBlur + feColorMatrix to make shapes merge fluidly when they
overlap.
The finishing touches that separate a good site from an award-winner. Noise, marquees, reveals, and more.
Continuously scrolling text that loops seamlessly. Uses two identical copies
side-by-side, animating translateX(-50%) to create the infinite loop illusion.
Content revealed by a sliding mask/wipe. An overlay div with
scaleX animation slides away to reveal content underneath. Used for image & text
reveals.
Animated background visible only through text shape. Uses
background-clip: text with a moving gradient or video behind the text cutout.
Subtle noise texture overlay that adds organic film-like quality. Uses a CSS
background-image with a tiny noise pattern, rapidly repositioned via keyframes.
Cards stack on top of each other with slight offset as you scroll. Uses
position: sticky with incremented top values for each card.
Elements snap back with a springy, elastic motion. Uses spring physics:
stiffness, damping, and mass parameters for organic feel.
Cursor stretches/squashes based on movement speed. Calculates velocity
between frames and applies scaleX/Y accordingly. Premium agency detail.
The $10K+ agency tricks. These are the effects that make Awwwards winners stand out from the rest.
Every word fills with color as you scroll through this section.
Each word transitions from dim to bright as scroll progresses. Apple’s
product pages use this constantly. Each word has its own scroll-linked opacity controlled by
ScrollTrigger.
Images spawn along the cursor path and fade out. Premium portfolio sites use this to reveal work samples as the user explores. Each image fades + scales out after spawning.
mousemove · createElement · opacity · requestAnimationFrameText arranged in a circle that rotates continuously. Uses SVG
textPath on a circular path. Common for badges, stamps, and premium
branding elements.
Draggable comparison slider reveals two overlapping layers. Uses
clip-path or overflow on the split point, driven by mouse X position.
Used for image comparisons.
Grid tilts in 3D perspective based on mouse position. Each item has its own
depth layer. Uses container-level perspective + rotateX/Y from cursor
offset.
Apple-style multi-color gradient background with organic movement. Multiple
blurred circles overlap and animate, creating a living gradient mesh. Uses
filter: blur().
Click-and-drag to scroll through slides with momentum physics. Velocity carries the slide after release, then decelerates naturally. No library needed — pure JS.
mousedown/move/up · velocity · momentum · requestAnimationFrameThe art of animation timing, choreography, and physics. These effects feel alive because of how they move.
Premium websites reveal text character by character as you scroll, creating a cinematic reading experience.
Each character fades in individually tied to scroll position. Creates a
"reading with you" effect. Each span gets its own scroll-linked animation via
ScrollTrigger.
Grid tiles light up, scale, or push away based on cursor proximity. Each tile calculates its distance to cursor and reacts proportionally. Used for interactive backgrounds.
mousemove · distance calc · grid · CSS custom propertiesRing fills up proportionally using SVG stroke-dashoffset on a
circle. stroke-dasharray = circumference, animate offset from full to target.
Dashboard essential.
Mechanical flip-clock style digits that flip to reveal new numbers. Each
digit has a top/bottom half with rotateX perspective flipping. Retro-premium feel.
Two halves of the screen scroll in opposite directions (one up, one down).
Creates dramatic visual tension. Uses CSS animation on each panel with opposite
translateY directions.
A colored curtain slides across, revealing content behind it. Two-phase animation: curtain enters from left, then exits to right. Used for section transitions.
scaleX · transform-origin · animation-delay · z-indexThe final frontier. Effects that separate $50K agency builds from everything else. Interactive, immersive, unforgettable.
A rotating gradient that flows around the card's border. Uses
background on a pseudo-element with conic-gradient that spins via
@keyframes. Inner content masks the center.
A large, blurred, softly-colored circle that lazily follows the cursor with
elastic easing. Creates an ambient, living background effect. Uses lerp for smooth
interpolation.
Gray placeholder shapes with a shimmering light sweep that indicates content
is loading. The shimmer uses a linear-gradient animated across via
background-position.
Three lines morph into an X (close icon) on click. Each line uses independent
transform transitions — top/bottom rotate ±45°, middle fades. Ubiquitous on mobile
nav.
Individual characters push away from the cursor based on proximity. Each
calculates its distance and applies a proportional translate. Resets smoothly when
cursor leaves.
A smooth progress bar that fills to 100% before the page reveals. Premium
sites use this to mask asset loading. Uses width animation with counter increment.
Fixed side-navigation dots that indicate current scroll section and allow click-to-jump. Active dot scales up and changes color. Found on one-page portfolio sites.
position: fixed · IntersectionObserver · scroll-to · active stateThe bleeding edge. Techniques that will define the next generation of web experiences. Master these and you're ahead of 99% of developers.
Image zooms into cursor position on hover, like a magnifying glass. Uses
transform-origin set to cursor position + scale on hover. E-commerce
essential.
Seamlessly looping horizontal gallery with no visible start/end. Content is duplicated and the track translates infinitely. Pauses on hover for inspection.
translateX · duplicate content · infinite · animation-play-stateText characters move with physics — they wave, bounce, or follow cursor with spring dynamics. Each character is an independent element with its own animation delay and response.
per-char animation · spring physics · mousemove · delay staggerFont weight and width change dynamically based on cursor position or scroll.
Variable fonts support continuous weight values via font-variation-settings.
Ultra-modern typography.
Dark/light mode switch with smooth CSS transitions on all color properties.
Uses CSS custom properties that transition via color-mix or animated
background. System pref aware.
Tab buttons with a sliding underline that glides between them. Content
cross-fades. The indicator uses translateX calculated from active tab's position.
Button fills with color from the cursor's entry direction, like liquid
rising. Uses a radial-gradient expanding from the hover point via CSS custom
properties set by JS.
Vector animations, simulations, and routing tricks extending beyond standard DOM and CSS.
Renders complex AfterEffects animations using JSON and lottie-web. Resolution independent and programmable.
Simulates a modern SPA route transition (like Barba.js). A colored block wipes the viewport before the new page renders.
GSAP Timeline · scaleY · transform-originA particle-based ambient fluid simulation running continuously. Reacts dynamically to mouse proximity and velocity forces.
HTML5 Canvas · requestAnimationFrame · repel physicsText scales up on scroll until it breaks the viewport, revealing a video playing beneath it using mix-blend-mode techniques.
mix-blend-mode: multiply · ScrollTrigger · scale