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 (62)Clear filters

Kind (scroll-effect, cursor)

Mood

dark (48)light (19)playful (5)calm (8)bold (6)luxury (1)minimal (10)retro (2)futuristic (6)editorial (8)

Industry (developer-tools, general)

ai (1)agency (6)portfolio (6)food (1)fashion (1)media (1)general (80)developer-tools (5)

Style

glassmorphism (1)gradient (16)monochrome (5)3d (7)illustration (6)photographic (2)typographic (6)parallax (12)particles (1)grain (1)dithered (1)video (14)

Licence

MIT (79)CC0-1.0 (5)Unlicense (1)

Source repo

matinmonshizadeh/animation-handbook (26)xiyu519/MotionVault (12)studygeorge/parallax-fx (6)superdesigndev/superdesign-prompts (5)MustBeSimo/web-design-studio (4)motiondesignlv/ReactZero-flow (3)ridelink0/ultimate-frontend-skills (3)Black-Line-Ops/scroll-scrub-hero (1)codrops/3DStackMotion (1)codrops/ImageExpansionTypography (1)codrops/OnScrollColumnsRows (1)codrops/OnScrollShapeMorph (1)codrops/ReflectionScroll (1)codrops/Scroll3DGrid (1)codrops/StickySections (1)codrops/TileScroll (1)codse/animata (1)dimeloper/motion-site-kit (1)educlopez/smoothui (1)GeoCodeCrafter/stratum-motion (1)JasonOracle/agnes-scroll-world (1)MarchalMaxim/scroll-sequence (1)mariozenmedina/frame-by-frame (1)nateherkai/scroll-craft (1)NicoSKOOL/ai-ranking-scroll-seo (1)oframe/ogl (1)prantikmedhi/scroll-earth (1)pulkitxm/claude-directory (1)SyncedCo/synced-motion (1)tangyistudio/scroll-frame-sequence (1)tech-maxara/cineritual (1)TommyChryst/claude-web-animations (1)ui-layouts/uilayouts (1)

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

2 across

Canvas scroll-scrub frame-sequence player: sticky stage, drop-in contract (frames + config.js) and wiring guide
Canvas scroll-scrub frame-sequence player: sticky stage, drop-in contract (frames + config.js) and wiring guide
Scroll Effect
Free sample
scroll-reveal-video: skill that re-encodes a video all-I-frame and maps its playback to scroll progress, with timed text overlays
scroll-reveal-video: skill that re-encodes a video all-I-frame and maps its playback to scroll progress, with timed text overlays
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: 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
PinnedReveal - Staggered eyebrow → title → summary reveal as a chapter enters view
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
MorphBackground - A scroll chapter whose background morphs between a warm and a cool palette by crossfading two stacked full-bleed gradient layers via opacity
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
ScrubVideo - A scroll-scrubbed <video> whose currentTime is driven by scroll progress (rAF, requestVideoFrameCallback when available) inside a pinned stage, degrading on iOS
Scroll Effect
Free sample
MagneticCursor - A custom cursor dot that rAF-lerps toward the pointer and snaps toward real focusable magnetic targets on hover, gated to fine pointers and disabled (native cur
Cursor
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Three-plane scroll + pointer parallax with depth of field and aerial perspective
Three-plane scroll + pointer parallax with depth of field and aerial perspective
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Dependency-free scroll motion runtime (reveals, scroll-driven animation with IO fallback, magnetic buttons)
Dependency-free scroll motion runtime (reveals, scroll-driven animation with IO fallback, magnetic buttons)
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
Cursor Follower - Custom element follows mouse with lerp lag
Cursor
Subscription
Mix-blend-mode: difference inverts any background.
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
CineRitual - video-to-frames converter and scroll frame-sync canvas engine with starter template
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
stratum-motion demo
stratum-motion demo
Scroll Effect
Subscription
SSR-safe reveal presets, stagger, parallax, scroll scene and page transition.
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
Frame by frame
Frame by frame
Scroll Effect
Subscription
Framework-agnostic engine mapping scroll position to video time (native video or canvas).
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scroll Earth scrub engine - zero-dependency mountScrollEarth(container, config) that maps scroll to video time across dive clips and connector clips, with a minimal mount page
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Frame-scrub site template - pinned canvas playing a responsive AVIF/WebP frame ladder scrubbed by ScrollTrigger, bounded decoded-bitmap cache, config-only reskin, with the committed 120-frame demo ladder
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
Synced Motion recipe gallery - live previews and copyable markup for all sixty accessible GSAP recipes (reveals, stagger, split text, marquee, pinned sequence, parallax, page transitions, SVG draw ...)
Synced Motion recipe gallery - live previews and copyable markup for all sixty accessible GSAP recipes (reveals, stagger, split text, marquee, pinned sequence, parallax, page transitions, SVG draw ...)
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scroll-world scrub engine (hardened) - framework-agnostic scroll-to-video-time engine with lite mode for weak devices, remote video unloading, and optional seamless Web Audio BGM
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 · 85 items · 48 on this page