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
Industry
Style
Licence
Source repo (matinmonshizadeh/animation-handbook, yojahny55/cinematic-scroll-kit)
- Build cinematic scroll site (continuous-reel scroll-scrub site generator)Subscription
Build cinematic scroll site (continuous-reel scroll-scrub site generator)
Skill
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Adaptive mobile strategy (autoplay-loop substitution, scrims, reduced motion)Subscription
Adaptive mobile strategy (autoplay-loop substitution, scrims, reduced motion)
Skill
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Scroll-scrub rendering (video.currentTime vs WebCodecs vs image-sequence decision tree)Subscription
Scroll-scrub rendering (video.currentTime vs WebCodecs vs image-sequence decision tree)
Skill
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Portable slash-commands: /cinematic-site (full pipeline) and /storyboardSubscription
Portable slash-commands: /cinematic-site (full pipeline) and /storyboard
Skill
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - 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