Imported library

v0.1 · Phase 0

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

Has preview (46)Clear filters

Kind (scroll-effect)

Mood (techy, dark)

dark (52)light (17)playful (3)calm (10)bold (9)luxury (1)minimal (9)techy (1)retro (1)futuristic (5)editorial (13)

Industry

ai (1)agency (3)portfolio (3)fashion (1)media (1)general (43)developer-tools (1)

Style

gradient (16)3d (6)illustration (6)typographic (7)parallax (9)video (8)

Licence

Source repo

Page 1 of 2 · 52 items · 48 on this page

2 across

Apex scroll hero
Scroll Effect
Subscription
Apple-product-page-style "Apex" hero whose 5-second F1 sunset film is scroll-scrubbed full-screen (scroll drives `video.currentTime`) with a synced speed/gear telemetry HUD.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
scrollcraft engine: zero-dependency scroll runtime driven by data-sc-* attributes (scrub video, pin, pan, flow acts; cues, drift, magnet), with a template page
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Section: exploded - dark section; layers pull apart on scroll (2D parallax = depth)
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Parallax Depth-of-Field - Five mountain layers translate at different speeds; blur simulates camera depth-of-field
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Parallax Scrolling - Elements move at different speeds
Scroll Effect
Subscription
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
Reverse-Scrolling Columns - A center column scrolls normally while two flanking columns scroll in reverse, looping infinitely
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Cover Card to Fixed Header - A full-page hero morphs into a compact fixed header
Scroll Effect
Subscription
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
Fly-in Fly-out Contact List - Rows translate and fade through entry, active, and exit zones as you scroll
Scroll Effect
Subscription
Bidirectional and continuous.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Stacking Cards - CSS Scroll-Driven Animations fan cards into a deck
Scroll Effect
Subscription
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
ScrollTrigger Animation - The onEnter / onLeave lifecycle demonstrated with vanilla JS
Scroll Effect
Subscription
Four scroll trigger zones.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scrub Animation - Scroll position is the playhead
Scroll Effect
Subscription
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
Pin Animation - An element freezes in place while the page scrolls beneath it
Scroll Effect
Subscription
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
Snap Scrolling - CSS scroll-snap-type creates a paginated, magnetic feel
Scroll Effect
Subscription
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
Scrollytelling - Fractional chapter progress drives continuous depth crossfades across six ocean-layer chapters
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Reveal on Scroll - Seven reveal techniques fired by IntersectionObserver at a configurable trigger line
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Stagger Reveal - Groups reveal with cascading delays
Scroll Effect
Subscription
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
Horizontal Scroll - Vertical scroll translates a horizontal panel strip
Scroll Effect
Subscription
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 position
Sticky Section - The whole section pins while its interior morphs through four states scrubbed to scroll position
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Counter Animation - Numbers count 0 → target with easing on scroll entry
Scroll Effect
Subscription
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
Progress Bar - Reading progress in three styles
Scroll Effect
Subscription
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
Section Wipe - The next section slides over the current via sticky z-index stacking
Scroll Effect
Subscription
Scale-down adds depth.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Zoom Into Image - clip-path expands from a framed card to full-bleed as you scroll
Scroll Effect
Subscription
The portal effect.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scroll Image Sequence - A canvas pinned with sticky; scroll progress maps to a frame index
Scroll Effect
Free sample
The Apple product-scroll technique, frames drawn procedurally.
Smooth (Inertia) Scroll - Wheel and touch input eased toward a target each frame
Scroll Effect
Subscription
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
Scroll Velocity Skew - Content shears with scroll speed and springs straight when you stop
Scroll Effect
Subscription
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
SVG Line Draw on Scroll - A winding route draws itself down the page via stroke-dashoffset, passing waypoints as you travel
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scroll-Driven Background Color - The background blends between section palettes as you scroll, flipping text contrast on light stops
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scroll-Driven 3D Rotation - CSS cube rotates through four choreographed stages as you scroll
Scroll Effect
Subscription
The Apple product-page pattern.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scroll progress bar
Scroll progress bar
Scroll Effect
Subscription
@reactzero/flow scroll example (WAAPI).
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Reveal on scroll
Reveal on scroll
Scroll Effect
Subscription
@reactzero/flow scroll example (WAAPI).
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Storytelling scroll timeline
Storytelling scroll timeline
Scroll Effect
Subscription
@reactzero/flow timeline example (WAAPI).
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scroll frame sequence
Scroll Effect
Subscription
Zero-dependency scroll-scrubbed image-sequence player with hold loops and mobile pan.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Next.js exact-frame scroll-sequence starter - sticky canvas, LRU decoded-image cache, nearby-frame preload, overlays, reduced-motion poster
Next.js exact-frame scroll-sequence starter - sticky canvas, LRU decoded-image cache, nearby-frame preload, overlays, reduced-motion poster
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
<scroll-sequence> - zero-dependency web component that pins a canvas and scrubs an image sequence on scroll, with declarative overlays, per-breakpoint sources, smooth/blend modes and a self-generating demo
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
scrollcraft engine (ai-ranking fork): zero-dependency data-sc-* scroll runtime, modified for the SEO build, with template page
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
On-scroll 3D grids
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Alternate column scroll
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Kinetic type scroll
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Rotating grid scroll
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Distorted reflection scroll
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scroll layout switch
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Sticky tilt sections
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Tile scroll parallax
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
3D stack motion
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Layout formations
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Horizontal panels scroll
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Sticky hero scale
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Stacked scroll sections
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in

Page 1 of 2 · 52 items · 48 on this page