The Customer Marketing & Advocacy Salary + Career Benchmark Report is live.

GSAP Text Animations

Every animation is triggered by a single CSS class. Add the class to any text element in Elementor via Advanced → CSS Classes.

.gsap-hero-shapes
Create Complex Text
Effects And Sequence
Animations With
GSAP Text Plugins

Words fade up, money icons pop in with a bounce, then everything gently floats. Refresh to replay.

.gsap-fade-up-words

Words fade up one by one as they enter view.

Most common heading reveal.

.gsap-fade-up-chars

Character by character reveal.

Finer grain than words. Best for short headlines.

.gsap-reveal-lines

Each line slides up from behind a mask, giving a clean reveal that feels editorial and intentional. Works beautifully on multi-line paragraphs.

Uses SplitText masking with auto re-splitting on resize.

.gsap-reveal-words

Words slide up from a mask.

Punchier than reveal-lines. Great for hero headlines.

.gsap-reveal-chars

Typographic tall reveal.

Characters rise from behind a mask. High-end feel.

.gsap-wave-chars

Wavy staggered bounce.

Playful. Characters bounce in with random offsets.

.gsap-rotate-chars

Spin into place.

Characters rotate and scale up. High energy.

.gsap-blur-words

Out of focus into sharp.

Words fade in from a blurred state. Cinematic.

.gsap-scramble

Scramble into the final text.

Randomizes through characters before landing. Hacker vibe.

.gsap-scramble-hover

Hover me to scramble.

Scramble on mouseover. Great for nav links or buttons.

.gsap-typewriter

Typed out one letter at a time.

Classic typewriter effect. Uses TextPlugin.

scroll complete
New customer marketing playbooks every other week

Mosey on over to The Outpost, where the best CMA practitioners are sharing their in-the-(tumble)weeds plays and tactics.