Hover Animations

GSAP Reference

Standard naming for designers and developers. Hover over any element to preview the animation. On mobile, use the Play button to trigger and toggle each animation.

Modified April 2, 2026 · 4:38 AM CST

Text Links

Text Link Hover Animations

Applied to anchor tags and inline text links. Pair with cursor: pointer in Webflow.

View Project
Underline Slide
Our Services
Underline Center
Read More
Color Shift
EXPLORE
Letter Spread
Learn More
Underline Wipe
Case Studies
Text Roll Up
About Us
Stagger Roll Up
Our Work
Text Highlight
Get Started Get Started Get Started
Color Swipe
Explore More
Text Scale
Word Buttons

Button Hover Animations

Applied to CTA and nav buttons. All use GSAP tweens — no CSS transitions.

Fill Slide
Lift Shadow
Border Draw
Arrow Append
Scale Pulse
Fill Rise
Fill Surge
Button Roll Up
Button Stagger Roll
Icon Buttons

Icon-Only Button Animations

Applied to icon-only CTAs, social links, and utility buttons.

Icon Spin
Scale Bounce
Wobble
Flip Y
Arrow Slide
Arrow Diagonal
Naming Convention — Names follow the Webflow component-property pattern: ElementType-AnimationName.
Designers specify the animation name; developers implement using GSAP gsap.to() / gsap.fromTo() on mouseenter / mouseleave events.
All durations default to 0.35s with ease: "power2.out" unless noted. Bounce variants use ease: "back.out(1.7)".