Category · sds-scroll-*
100 Scroll CSS animations
Viewport-triggered entrance effects, fired by the optional 1.3 KB scroll gate or by native scroll-driven animation. The scroll bundle is 5.8 KB gzip (33.6 KB minified).
Import only this category
import "@salkomdesignstudio/sds-motion-forge/categories/scroll";Or use the CDN: https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/categories/scroll.min.css. Core (tokens, modifiers, reduced-motion) is already inside each category bundle; to use two or more categories, load the full https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css instead.
All 100 scroll animations
- Barrel
.sds-scroll-barrel— Element tumbles in with a diagonal barrel-roll 3D rotation - Blink In
.sds-scroll-blink-in— Opacity steps up through four discrete levels like a screen powering on - Blur Ascend
.sds-scroll-blur— Rises and resolves from 16px blur - Bounce
.sds-scroll-bounce— Bounce — scroll animation - Cascade
.sds-scroll-cascade— Cascade — scroll animation - Charge Reveal
.sds-scroll-charge— Charge Reveal — scroll animation - Cinema
.sds-scroll-cinema— Cinema — scroll animation - Cinematic
.sds-scroll-cinematic— Letterbox bars open outward from the center as the element reveals - Clip Left
.sds-scroll-clip-left— Clip Left — scroll animation - Clip Right
.sds-scroll-clip-right— Clip Right — scroll animation - Contrast In
.sds-scroll-contrast-in— Emerges from high-contrast darkness into natural color and brightness - Crystallize
.sds-scroll-crystallize— Crystallize — scroll animation - Curtain Lift
.sds-scroll-curtain— Clips up from bottom like a curtain - Depth Enter
.sds-scroll-depth— Portal entrance from deep Z-space - Dissolve
.sds-scroll-dissolve— Dissolve — scroll animation - Door Left
.sds-scroll-door-left— Element swings open from its left edge like a door on a left hinge - Door Right
.sds-scroll-door-right— Element swings open from its right edge like a door on a right hinge - Drift
.sds-scroll-drift— Drift — scroll animation - Drop In
.sds-scroll-drop-in— Element drops from above and bounces into its final position - Elastic
.sds-scroll-elastic— Elastic — scroll animation - Elastic Pop
.sds-scroll-elastic-pop— Elastic Pop — scroll animation - Exhale
.sds-scroll-exhale— Gently scales down from 112% while fading in — like a slow exhale - Fade Up
.sds-scroll-fade-up— Fade Up — scroll animation - Bright Flash
.sds-scroll-flash— Bright Flash — scroll animation - Flip Reveal
.sds-scroll-flip— Flip Reveal — scroll animation - Flip Up
.sds-scroll-flip-up— Element hinges open from its bottom edge like a trap door swinging up - Float
.sds-scroll-float— Drifts up 6px with a soft blur dissolve — weightless and ethereal - Fog
.sds-scroll-fog— Fog — scroll animation - Glare
.sds-scroll-glare— Element burns in from a bright overexposed glare to natural - Glitch Reveal
.sds-scroll-glitch— Glitch burst + viewport rise combo - Glitch In
.sds-scroll-glitch-in— Tears in through glitch artifacts — hue shifts, clip flickers, and X displacement - Gravity Land
.sds-scroll-gravity— Drops in from above with elastic bounce - Hinge In
.sds-scroll-hinge-in— Element hinges open from its top edge like a trap door - Hologram
.sds-scroll-hologram— Hologram — scroll animation - Ink
.sds-scroll-ink— Ink — scroll animation - Iris
.sds-scroll-iris— A circular iris expands from the center to reveal the element - Jello
.sds-scroll-jello— Element bounces in with a wobbly jello-like scale and skew oscillation - Kaboom
.sds-scroll-kaboom— Element explodes into view from zero scale with an overshoot pop - Lean
.sds-scroll-lean— Element leans in from the right in perspective then snaps upright - Liquid Enter
.sds-scroll-liquid— Liquid skew-rise on viewport enter - Magnetic Pull
.sds-scroll-magnetic— Magnetic Pull — scroll animation - Materialize
.sds-scroll-materialize— Steps through four discrete opacity and blur levels like materializing digitally - Morph Rise
.sds-scroll-morph— Morph Rise — scroll animation - Neon Reveal
.sds-scroll-neon— Neon Reveal — scroll animation - Neon Pop
.sds-scroll-neon-pop— Scales in with a burst of neon drop-shadow glow that settles - Orbit Enter
.sds-scroll-orbit— Perspective swing from the left - Overexpose
.sds-scroll-overexpose— Element burns in from an overexposed flash to natural brightness - Peel
.sds-scroll-peel— Element peels upward from its bottom edge like a sticker lifting - Perspective Left
.sds-scroll-perspective-left— Perspective Left — scroll animation - Phantom Rise
.sds-scroll-phantom— Crystallises from a bright blur - Pixel In
.sds-scroll-pixel-in— Resolves from a heavy blur and slight zoom to sharp full detail - Pop In
.sds-scroll-pop-in— Snaps from zero to overshoot then settles with a springy multi-step pop - Prism Reveal
.sds-scroll-prism— Prism Reveal — scroll animation - Punch
.sds-scroll-punch— Punch — scroll animation - Radial Expand
.sds-scroll-radial— Circle expands from the bottom center - Viewport Rise
.sds-scroll-rise— Rises up as it enters the viewport - Rise Right
.sds-scroll-rise-right— Element rises diagonally from the lower-left while fading in - Roll In
.sds-scroll-roll-in— Element slides in from the left while rotating into place - Rotate In
.sds-scroll-rotate-in— Element rotates from −8° and rises while fading in - Rubber Band
.sds-scroll-rubber-band— Squashes and stretches into place with rubber-band physics - Saturate
.sds-scroll-saturate— Element transitions from grayscale to full color while fading in - Scale Reveal
.sds-scroll-scale— Scales up from 70% with blur resolve - Scan Line
.sds-scroll-scan— Wipes in from left via clip-path - Sepia
.sds-scroll-sepia— Element transitions from sepia tone to full color while fading in - Shatter Enter
.sds-scroll-shatter— Explodes in from large scale - Shudder
.sds-scroll-shudder— Shakes horizontally on entry then vibrates to a stop - Sink
.sds-scroll-sink— Settles gently downward from above while fading in - Skew
.sds-scroll-skew— Skew — scroll animation - Skid In
.sds-scroll-skid-in— Slides in fast from the right, overshoots, and brakes - Momentum Slide
.sds-scroll-slide— Slides in from the left with overshoot - Slide Right
.sds-scroll-slide-right— Slide Right — scroll animation - Slingshot
.sds-scroll-slingshot— Compressed from the left then launched forward with elastic overshoot - Snap
.sds-scroll-snap— Snap — scroll animation - Spin Y
.sds-scroll-spin-y— Spins in with a 180° rotateY perspective rotation - Spiral
.sds-scroll-spiral— Spiral — scroll animation - Split Reveal
.sds-scroll-split— Split Reveal — scroll animation - Spring
.sds-scroll-spring— Spring — scroll animation - Stagger Fade
.sds-scroll-stagger-fade— Children fade in one by one in a staggered sequence - Stagger Grid
.sds-scroll-stagger-grid— Grid children rise in sequence - Stagger Pop
.sds-scroll-stagger-pop— Children pop in with scale+rotate stagger - Stagger Rise
.sds-scroll-stagger-rise— Children rise up and fade in one by one in sequence - Stagger Slide
.sds-scroll-stagger-slide— Children slide in from the left one by one in a staggered sequence - Streak
.sds-scroll-streak— Streak — scroll animation - Stretch
.sds-scroll-stretch— Element stretches out from a narrow vertical sliver to full width - Thermal
.sds-scroll-thermal— Element resolves from a thermal hue-shift and high saturation to natural color - Tidal
.sds-scroll-tidal— Slides in from the left with a wave-like settling oscillation - Tilt Reveal
.sds-scroll-tilt— Folds down from a 50° X-axis rotation - Typewriter
.sds-scroll-typewriter— Reveals in discrete steps from left to right like a typewriter printing - Unfold
.sds-scroll-unfold— Unfold — scroll animation - Unfurl
.sds-scroll-unfurl— Unrolls from the top-left corner with a gentle rotate and scale - Velvet Drop Scroll
.sds-scroll-velvet— Velvet drop on viewport enter - Vortex
.sds-scroll-vortex— Vortex — scroll animation - Scroll Warp
.sds-scroll-warp— Perspective-warp entrance from below - Warp Enter
.sds-scroll-warp-in— Warp Enter — scroll animation - Wave Rise
.sds-scroll-wave-rise— Wave Rise — scroll animation - Wipe Right
.sds-scroll-wipe-right— Element is revealed by a clip-path that wipes across from left to right - Wipe Up
.sds-scroll-wipe-up— Element is revealed by a clip-path that wipes upward from the bottom - Zoom Blur
.sds-scroll-zoom-blur— Zoom Blur — scroll animation - Zoom In
.sds-scroll-zoom-in— Element scales up from 50% while fading in - Zoom Out
.sds-scroll-zoom-out— Element scales down from 135% while fading in