Svelte Animations
Command Palette
Search for a command to run

Slide Up Text

Text animation that slides up from bottom with stagger effect.

motion-sv
You can just ship things.

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/slide-up-text.json

Examples

Split By

BY WORDS Beautiful animated text
BY CHARACTERS You just can ship things.
BY LINES First line Second line Third line

From

FROM FIRST Animation from first word
FROM LAST Animation from last word
FROM CENTER Animation from center outward

Props

NameTypeDefaultDescription
children
Snippet required Plain text snippet content that is flattened and split into animated units.
split
"words" | "characters" | "lines" "words" Controls whether the reveal animates word groups, grapheme-safe characters, or line breaks.
delay
number 0 Adds a base delay in seconds before the first animated unit begins.
stagger
number 0.1 Controls the delay in seconds between animated units.
from
"first" | "last" | "center" "first" Sets where the stagger timing begins across the animated units.
transition
AnimationOptions { type: "tween", duration: 0.5, ease: [0.625, 0.05, 0, 1] } Overrides the motion transition used for each unit's vertical reveal.
autoStart
boolean true Starts the animation immediately when not using viewport triggering.
triggerOnView
boolean false Waits to animate until the component enters the viewport.
once
boolean true When using triggerOnView, controls whether the reveal runs only on first entry.
onStart
() => void Called when the component starts a new animation cycle.
onComplete
() => void Called after the final visible unit finishes animating.
class
string Custom classes applied to the root wrapper.
wordClass
string '' Custom classes applied to each word or line wrapper.
charClass
string Custom classes applied to each character wrapper.