Imported library
3427 items in the library.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages. Sign in
Kind
Mood
Style
Licence
Source repo (matinmonshizadeh/animation-handbook, imMamdouhaboammar/creative-agent-pack)
- Subscription
Parallax Depth-of-Field - Five mountain layers translate at different speeds; blur simulates camera depth-of-field
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Parallax Scrolling - Elements move at different speeds
Scroll Effect
Background slower, foreground faster — creating a 3D depth illusion.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Reverse-Scrolling Columns - A center column scrolls normally while two flanking columns scroll in reverse, looping infinitely
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Cover Card to Fixed Header - A full-page hero morphs into a compact fixed header
Scroll Effect
Every visual property scrubbed to a single progress value.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Fly-in Fly-out Contact List - Rows translate and fade through entry, active, and exit zones as you scroll
Scroll Effect
Bidirectional and continuous.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Stacking Cards - CSS Scroll-Driven Animations fan cards into a deck
Scroll Effect
Per-index sticky offset creates the visible peek tab.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
ScrollTrigger Animation - The onEnter / onLeave lifecycle demonstrated with vanilla JS
Scroll Effect
Four scroll trigger zones.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Scrub Animation - Scroll position is the playhead
Scroll Effect
A flight path doubles as its own timeline, seekable in either direction.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Pin Animation - An element freezes in place while the page scrolls beneath it
Scroll Effect
CSS sticky, no JavaScript pinning.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Snap Scrolling - CSS scroll-snap-type creates a paginated, magnetic feel
Scroll Effect
Mandatory, proximity, and none compared.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Scrollytelling - Fractional chapter progress drives continuous depth crossfades across six ocean-layer chapters
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Reveal on Scroll - Seven reveal techniques fired by IntersectionObserver at a configurable trigger line
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Stagger Reveal - Groups reveal with cascading delays
Scroll Effect
Forward, reverse, center-out, and random cascade directions.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Horizontal Scroll - Vertical scroll translates a horizontal panel strip
Scroll Effect
A tall pinned section provides the scroll budget.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Sticky Section - The whole section pins while its interior morphs through four states scrubbed to scroll positionSubscription
Sticky Section - The whole section pins while its interior morphs through four states scrubbed to scroll position
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Counter Animation - Numbers count 0 → target with easing on scroll entry
Scroll Effect
Four formats and configurable curve.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Progress Bar - Reading progress in three styles
Scroll Effect
Top bar, circular ring, and side rail — driven by scrollTop / scrollHeight.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Section Wipe - The next section slides over the current via sticky z-index stacking
Scroll Effect
Scale-down adds depth.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Zoom Into Image - clip-path expands from a framed card to full-bleed as you scroll
Scroll Effect
The portal effect.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Smooth (Inertia) Scroll - Wheel and touch input eased toward a target each frame
Scroll Effect
Weighted, gliding momentum instead of native jumps.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Text Fill on Scroll - A pinned paragraph fills word by word as you scroll
Text Effect
Pause mid-read, scroll back and it un-reads.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Scroll Velocity Skew - Content shears with scroll speed and springs straight when you stop
Scroll Effect
Motion mapped to velocity, not position.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
SVG Line Draw on Scroll - A winding route draws itself down the page via stroke-dashoffset, passing waypoints as you travel
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Scrollspy Navigation - A nav rail tracks the section in view with a sliding indicator
Navbar
The docs-site pattern.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Scroll-Driven Background Color - The background blends between section palettes as you scroll, flipping text contrast on light stops
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Fade In / Fade Out - Opacity 0 → 1 enter, 1 → 0 exit
Entrance
The compositor handles this without re-painting.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Slide In - Translates from an off-screen edge into final position
Entrance
With or without simultaneous fade.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Slide Up Reveal - Text rises from below its clip boundary
Text Effect
TranslateY method vs clip-path inset, identical visual result.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Scale In / Zoom In - Scales from a small start value to 1.0
Entrance
Transform-origin controls where the pop expands from.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Clip-Path Reveal - A shape mask expands to uncover the element
Entrance
Content is always rendered, just progressively visible.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Curtain Reveal - A colored bar slides over content then off the other side
Entrance
The reveal is hidden then exposed.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Split Text Reveal - Text split into chars, words, or lines
Text Effect
Each piece staggers with --index CSS transition-delay.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Letter-by-Letter Stagger - CSS transition-delay cascade per letter, or JS typewriter mode with a blinking cursor
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Word-by-Word Reveal - Words animate sequentially at 80–120ms per word
Text Effect
The readable stagger speed for taglines.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Blur In - Fades in while reducing blur
Entrance
Mimics camera focus pulling. Best on single hero elements.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Flip In - Rotates from a flat plane into view using CSS 3D perspective
Entrance
Perspective on the parent is the key.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Bounce In - Overshoots final position then springs back
Entrance
Explicit @keyframes waypoints, not easing alone.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Rotate In - Spins while entering
Entrance
Best on radially-symmetric shapes like icons, stars, and gears.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
View Transitions API - document.startViewTransition()
Transition
The browser captures before/after and animates automatically.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Shared Element Transition - A thumbnail morphs continuously into a detail hero as pages change
Transition
The FLIP technique applied.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Morph Transition - An SVG path morphs between page-specific shapes
Transition
Point-by-point interpolation across 12-vertex paths.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Crossfade - Both pages visible simultaneously at ~50% opacity mid-transition
Transition
Compare with sequential fade.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Slide Transition - Directional slides with forward/back awareness
Transition
Matches native iOS and Android navigation patterns.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Zoom Transition - Three scale variants
Transition
Zoom-in, zoom-out, pull-through — each implying different spatial depth.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Flash / Light Leak - A colored flash peaks at full opacity, hides the page swap, then fades to reveal the new scene
Transition
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Blur Transition - Current page blurs and fades out, then new page sharpens in
Transition
A defocus wipe between scenes.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Elastic Transition - Spring physics cause overshoot before settling
Transition
CSS keyframes or live JS spring simulation.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in