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

Kind (text-effect, loader, scroll-effect)

hero (15)navbar (3)cta (1)gallery (2)text-effect (22)background (559)loader (7)cursor (4)scroll-effect (40)3d-scene (9)shader (75)button (10)card (11)form (6)full-page (1)other (22)transition (13)entrance (14)app-screen (1)

Mood

dark (58)light (3)playful (1)calm (2)bold (6)minimal (7)techy (5)retro (2)futuristic (1)editorial (3)

Industry

general (67)developer-tools (1)

Style

gradient (3)neon (1)3d (1)illustration (6)photographic (1)typographic (23)parallax (8)video (4)terminal (1)

Licence

Source repo

matinmonshizadeh/animation-handbook (48)motiondesignlv/ReactZero-flow (5)studygeorge/parallax-fx (5)pulkitxm/claude-directory (3)MustBeSimo/web-design-studio (2)ridelink0/ultimate-frontend-skills (2)GeoCodeCrafter/stratum-motion (1)nateherkai/scroll-craft (1)NicoSKOOL/ai-ranking-scroll-seo (1)SyncedCo/synced-motion (1)

Page 1 of 2 · 69 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
Bloom nested squares
Loader
Subscription
The shadcn "Bloom" NestedSquares component (25 violet-gradient squares scaling and rotating forever via Framer Motion) staged in a dark motion-specimen studio — a graticule plate, ambient glow, and a calibration rail of dials that retune the live component's ring count, period, stagger, growth, spin and culture.
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
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
KineticHeadline - A heading that splits into per-word, per-line spans which stagger in on transform + opacity as it enters view (split-line-rise vocabulary), reading as one acces
Text Effect
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
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
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
Text Fill on Scroll - A pinned paragraph fills word by word as you scroll
Text Effect
Subscription
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
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
Slide Up Reveal - Text rises from below its clip boundary
Text Effect
Subscription
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
Split Text Reveal - Text split into chars, words, or lines
Text Effect
Subscription
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
Letter-by-Letter Stagger - CSS transition-delay cascade per letter, or JS typewriter mode with a blinking cursor
Text Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Word-by-Word Reveal - Words animate sequentially at 80–120ms per word
Text Effect
Subscription
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
Skeleton Loader - Pulsing placeholder blocks match the shape of real content
Loader
Subscription
Reduces perceived wait time.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Shimmer Effect - Gradient sweep over skeleton placeholders
Loader
Subscription
Gives the impression of data streaming in.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Loading Spinner - Six spinner variants from a single CSS color and speed
Loader
Subscription
Ring, orbit, arc, bounce, pulse, square.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Progress Animation - Linear bar, circular ring, and stepped segments
Loader
Subscription
All driven by a single percentage value.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Kinetic Typography - Phrases enter, transform, and exit in a choreographed timeline
Text Effect
Subscription
Motion reinforces meaning.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Typewriter Effect - Characters appear one at a time with a blinking cursor
Text Effect
Subscription
Natural timing variance makes it feel human.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scramble / Glitch Text - Characters cycle randomly before locking left-to-right
Text Effect
Subscription
Decryption and sci-fi aesthetic.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Variable Font Morph - CSS font-variation-settings animates weight, slant, and casual axes of a variable font
Text Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Text Clip-Path Reveal - Lines reveal via expanding clip-path mask
Text Effect
Subscription
Preserves kerning and typographic spacing exactly.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Marquee / Ticker - Continuous horizontal scroll with seamless loop
Text Effect
Subscription
Duplicated content makes the reset invisible.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Text Morphing - One word transitions into another character by character
Text Effect
Subscription
Each letter slides out as the next slides in.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Text Gradient Animation - background-clip: text with animated background-position flows color through the characters
Text Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Outline to Fill - Hollow stroke letterforms fill with color
Text Effect
Subscription
Clip-path reveal or opacity crossfade.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in

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