Category · sds-*

104 Text CSS animations

Headline, per-character and word-level text effects: entrances, loops, glows, reveals and physics-style motion. The text bundle is 8.4 KB gzip (45.5 KB minified).

Import only this category

import "@salkomdesignstudio/sds-motion-forge/categories/text";

Or use the CDN: https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/categories/text.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 104 text animations

• Arc Orbit .sds-arc-orbit — Each child orbits in with stagger delay
• Aurora Text .sds-aurora-text — Six-colour gradient clip sweeps through text
• Blur Focus .sds-blur-focus — Sharpens from heavy blur with tracking
• Bounce Drop In .sds-bounce-drop-in — Drops in with a squashy bounce
• Bounce In Up .sds-bounce-in-up — Multi-step elastic Y-axis bounce entrance
• Bounce Loop .sds-bounce-loop — Bounces continuously (loop)
• Center Burst .sds-center-burst — Chars start at center, fan out
• Char Orbit .sds-char-orbit — Orbits in from above with rotation
• Chromatic Shift .sds-chromatic-shift — Slow hue-rotate + saturate colour cycle
• Cinema Title .sds-cinema-title — Letter-spacing collapses with blur in cinematic style
• Cipher Reveal .sds-cipher-reveal — Brightness and blur resolve like decryption
• Color Cycle .sds-color-cycle — Cycles through a flowing gradient (loop)
• Data Stream .sds-data-stream — Clip-path + brightness data-decode entrance
• Depth Charge .sds-depth-charge — Deep warp from Z-space with delay
• Depth Warp .sds-depth-warp — Flies in from deep Z-space
• Door Open .sds-door-open — Swings open like a door in 3D
• Drop Bounce .sds-drop-bounce — Drops and bounces on the floor
• Drop & Settle .sds-drop-settle — Per-char staggered fall from above
• Echo Out .sds-echo-out — Casts a layered echo shadow
• Elastic Bounce .sds-elastic-bounce — Spring overshoot with cubic-bezier(0.34,1.56,0.64,1)
• Elastic Stamp .sds-elastic-stamp — Scales in from zero with elastic rotation
• Explode Formation .sds-explode-formation — Scattered start, spring to position
• Film Burn .sds-film-burn — Sepia-tinted focus-pull entrance
• Flicker On .sds-flicker-on — Light-bulb turn-on with stepped opacity flicker
• Flip X .sds-flip-x — Flips in on the X axis
• Flip Y .sds-flip-y — Flips in on the Y axis
• Float Bob .sds-float-bob — Gently floats and bobs (loop)
• Focus Pull .sds-focus-pull — Camera-focus pull from soft to sharp
• Fold Down .sds-fold-down — Folds down into view on a 3D hinge
• Fold Up .sds-fold-up — Folds up into view on a 3D hinge
• Glitch Flicker .sds-glitch-flicker — Flickering analog noise with slicing displacement
• Glitch Slide .sds-glitch-slide — Glitch-steps into place
• Glow Pulse .sds-glow-pulse — Pulses with a soft neon glow (loop)
• Gradient Sweep .sds-gradient-sweep — Moving gradient mask over the text
• Grand Entrance .sds-grand-entrance — Big orchestrated scale-blur entrance
• Gravity Bounce .sds-gravity-bounce — Falls under gravity, inelastic floor bounce
• Gravity Drop .sds-gravity-drop — Falls from above with overshoot bounce
• Heartbeat .sds-heartbeat-text — Beats like a heartbeat (loop)
• Heat Shimmer .sds-heat-shimmer — Subtle heat-distortion skewX + scaleY loop
• Highlight Burn .sds-highlight-burn — Highlight marker swipes across the text
• Hologram Text .sds-hologram-text — Holographic skew flicker with hue rotation
• Ink Bleed .sds-ink-bleed — Letter-spacing collapses as blur resolves
• Iris Open .sds-iris-open — Opens from a circular iris
• Jello .sds-jello — Jiggles with a jello skew
• Kinetic Wave .sds-kinetic-wave — Each child bounces up/down in a wave
• Levitate .sds-levitate — Gentle float with subtle rotation
• Light Speed .sds-light-speed — Streaks in with a skewed light-speed motion
• Liquid Rise .sds-liquid-rise — Rises up with skew and blur in one fluid arc
• Magnetic Drift .sds-magnetic-drift — Circular XY drift like magnetic field pull
• Morph Word .sds-morph-word — ScaleX + skewX + letter-spacing morphing loop
• Neon Flare .sds-neon-flare — Pulsing neon glow with colour shift
• Neon Flicker In .sds-neon-flicker-in — Flickers on like a neon sign
• Neon Pulse Text .sds-neon-pulse-text — Neon text glow that breathes on a loop
• Oscillate .sds-oscillate — Sine-wave Y + rotate + scaleX oscillation
• Pendulum .sds-pendulum — Swings like a pendulum (loop)
• Perspective Swing .sds-perspective-swing — Swings in on the Y-axis with perspective
• Phantom Blur .sds-phantom-blur — Crystallises from a bright radial blur
• Pixel In .sds-pixel-in — Resolves from a pixelated blur
• Pop In .sds-pop-in — Pops in from zero with a spring
• Prism Split .sds-prism-split — Chromatic aberration effect on loop
• Refract .sds-refract — RGB glitch split, loops smoothly
• Reveal Down Mask .sds-reveal-down-mask — Wipes down behind a mask
• Reveal Up Mask .sds-reveal-up-mask — Wipes up behind a mask
• Ripple Text .sds-ripple-text — Letter-spacing + scale + blur ripple entrance
• Roll In .sds-roll-in — Rolls in rotating from the left
• Rubber Band .sds-rubber-band — Stretches like a rubber band
• Scramble Decode .sds-scramble-decode — Blurs and skews repeatedly like decoding
• Shadow Lift .sds-shadow-lift — Lifts up casting a soft shadow
• Shatter In .sds-shatter-in — Explodes in from massive scale with blur
• Shimmer Sweep .sds-shimmer-sweep — A light shimmer sweeps across (loop)
• Signal Wave .sds-signal-wave — Wider stagger wave, slower period
• Skew Slide .sds-skew-slide — Slides in with a skew shear
• Slant Rise .sds-slant-rise — Rises in on a slant
• Slice Reveal .sds-slice-reveal — Wipes in from left via clip-path
• Slide Blur Left .sds-slide-blur-left — Slides from left through a blur
• Slide Blur Right .sds-slide-blur-right — Slides from right through a blur
• Smoke Reveal .sds-smoke-reveal — Resolves from a smoke-like blur field
• Split Reveal .sds-split-reveal — Polygon clip-path splits open from center
• Spotlight .sds-spotlight — Brightens in under a spotlight
• Squash Stretch .sds-squash-stretch — Squashes then stretches into place
• Stagger Chars .sds-stagger-chars — Up to 12 children stagger in with skewY
• Static Burst .sds-static-burst — Glitchy signal-noise corruption loop
• Streak In .sds-streak-in — High-speed streak entrance from the left
• Strike Through .sds-strike-through — Strike line draws across
• Swing In .sds-swing-in — Swings in with a pendulum overshoot
• Tada .sds-tada — Celebratory scale-and-rotate tada
• Tracking Contract .sds-tracking-contract — Letters contract into place
• Tracking Expand .sds-tracking-expand — Letters expand out into place
• Typewriter Pro .sds-typewriter-pro — Classic typewriter with blinking cursor
• Typing Caret .sds-typing-caret — Types out with a blinking caret
• Underline Grow .sds-underline-grow — Underline draws on from left
• Unfurl .sds-unfurl — Clip-path inset + scaleX unfurls from the left
• Vapor Rise .sds-vapor-rise — Rises and sharpens from a vapor blur
• Velocity Blur .sds-velocity-blur-text — Streaks in from left with motion blur
• Velvet Drop .sds-velvet-drop — Drops in with a soft blur and bounce
• Vibrate .sds-vibrate — Rapid vibrate buzz (loop)
• Wave Cascade .sds-wave-cascade — Disturbance propagates char-to-char (loop)
• Weight Drop .sds-weight-drop — Overshoot gravity with extreme easing
• Wipe Left .sds-wipe-left — Clip-wipes in to the left
• Wipe Right .sds-wipe-right — Clip-wipes in to the right
• Wobble .sds-wobble — Wobbles side to side on entry
• Word Blur In .sds-word-blur-in — Blur resolves to sharp with scale focus
• Zoom Out In .sds-zoom-out-in — Settles from oversized with blur
• Zoom Punch .sds-zoom-punch — Punches in from tiny to full with overshoot

Browse all categories · Installation & usage docs