# 100 Scroll CSS animations

Viewport-triggered entrance effects, fired by the optional 1.3 KB scroll gate or by native scroll-driven animation. Bundle: 5.8 KB gzip (33.6 KB minified).

```js
import "@salkomdesignstudio/sds-motion-forge/categories/scroll";
```

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