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

Kind (scroll-effect, tool, loader, menu, table, button)

Mood

dark (81)light (42)playful (11)calm (10)bold (57)luxury (1)minimal (62)techy (7)retro (1)futuristic (13)editorial (13)

Industry

saas (3)ai (4)agency (6)portfolio (7)food (2)fashion (1)media (1)general (186)developer-tools (7)

Style

glassmorphism (2)gradient (30)neon (2)monochrome (23)3d (8)illustration (7)photographic (2)typographic (15)parallax (15)particles (4)grain (1)video (18)terminal (2)

Licence

MIT (203)CC0-1.0 (7)

Source repo

uiverse-io/galaxy (53)matinmonshizadeh/animation-handbook (38)xiyu519/MotionVault (32)cosscom/coss (7)superdesigndev/superdesign-prompts (7)codse/animata (6)motiondesignlv/ReactZero-flow (5)pulkitxm/claude-directory (5)studygeorge/parallax-fx (5)shadcn-ui/ui (4)ui-layouts/uilayouts (4)educlopez/smoothui (3)MustBeSimo/web-design-studio (3)ridelink0/ultimate-frontend-skills (3)mantinedev/ui.mantine.dev (2)tangyistudio/scroll-frame-sequence (2)tremorlabs/tremor-blocks (2)Black-Line-Ops/scroll-scrub-hero (1)codrops/3DStackMotion (1)codrops/ColumnScroll (1)codrops/ImageExpansionTypography (1)codrops/ImageTilesMenu (1)codrops/OneElementScroll (1)codrops/OnScrollColumnsRows (1)codrops/OnScrollLayoutFormations (1)codrops/OnScrollShapeMorph (1)codrops/ReflectionScroll (1)codrops/Scroll3DGrid (1)codrops/ScrollBasedLayoutAnimations (1)codrops/StickySections (1)codrops/TileScroll (1)dimeloper/motion-site-kit (1)GeoCodeCrafter/stratum-motion (1)imMamdouhaboammar/creative-agent-pack (1)JasonOracle/agnes-scroll-world (1)kokonut-labs/kokonutui (1)MarchalMaxim/scroll-sequence (1)mariozenmedina/frame-by-frame (1)nateherkai/scroll-craft (1)NicoSKOOL/ai-ranking-scroll-seo (1)prantikmedhi/scroll-earth (1)SyncedCo/synced-motion (1)tech-maxara/cineritual (1)TommyChryst/claude-web-animations (1)untitleduico/react (1)yojahny55/cinematic-scroll-kit (1)

Page 1 of 5 · 210 items · 48 on this page

2 across

Realmagic ticker scroll
Scroll Effect
Subscription
"Real Magic" Coca-Cola-flavored horizontal ticker-tape scroll built with GSAP ScrollTrigger — one continuous sentence ("In every bottle, discover the undeniable Real Magic of sharing pure Refreshment that brings us Together") laid out in a single nowrap flex line on a flat #f40009 red stage, read sideways as the pinned viewport scrubs the line horizontally (travel = scrollWidth − vw, end +=travel×1.15, scrub 0.6). Heavy Anton uppercase words alternate with faint italic Instrument-Serif connectives and outlined-stroke accent words (Magic/Together), with inline currentColor SVG glyphs (bottle, rising carbonation bubbles, signature ribbon swoosh, droplet, clinking bottles, heart full-stop) embedded like punctuation with variable per-item margins; idle looping glyph micro-motion, accent depth parallax, a cream scroll-progress bar, grain + vignette overlays, and an "Open happiness." outro after the pin releases. GSAP + fonts vendored locally, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Sticky content switch
Scroll Effect
Subscription
Scroll-driven "sticky content switch" editorial template — a warm paper (#f4f1ea) / near-black (#0e0e0c) two-column section on vendored Anton + Inter with a burnt-orange (#c4622d) accent, where the left column is position:sticky and vertically pinned while six 100vh image panels scroll past on the right; an IntersectionObserver with a -50%/-50% rootMargin band fires exactly when each image's midpoint crosses screen center, crossfading + slide-swapping the pinned heading (index, kicker, title, body, meta) to match the active frame, a transform:scaleY accent progress rail with growing ticks, a rAF parallax that scales each image 1.08→1.0 toward center plus grayscale-to-color on active, a per-letter hero rise-reveal, and a ghosted-wordmark outro; six themed procedural SVG images + fonts vendored, fully offline, responsive stacked feed under 900px, respects prefers-reduced-motion.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
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
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
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
ffmpeg helpers: stage AI clips, all-keyframe encode, 9:16 mobile reframe
ffmpeg helpers: stage AI clips, all-keyframe encode, 9:16 mobile reframe
Tool
Free sample
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
Hover State Animation - Six hover techniques side by side
Button
Subscription
Color shift, scale, lift, underline grow, icon nudge, and background sweep.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Click / Tap Ripple - Ripple emanates from the exact click point
Button
Subscription
Material Design's tactile confirmation pattern.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Button Press Scale - Scales to 0.95 on press, springs back on release
Button
Subscription
Asymmetric timing gives a tactile feel.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Magnetic Button - Button leans toward the cursor within a radius, label lagging for parallax
Button
Subscription
Springs home on exit.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Heart / Like Burst - Tap pops and fills the heart while small hearts burst outward on canvas
Button
Subscription
Twitter-style like.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Success Confetti - Completing an action fires a canvas confetti burst
Button
Subscription
Rotating rectangles with gravity and spin.
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

Page 1 of 5 · 210 items · 48 on this page