Gsap Text Effects

About This Component

GSAP Text For Framer is a high-performance, scroll-driven typography component designed for Framer. It leverages the power of GSAP (GreenSock) to transform standard text into a cinematic experience. Whether it’s a staggered character entrance or a "scrub" effect that highlights text as you scroll, this component brings professional-grade motion to your layout with zero coding required.

Discover more premium components

https://www.framer.com/@victor-adekunle/

Key Features

• Choose from 9 professional animation modes to bring your typography to life. Each mode is optimized for high-end digital experiences:

  • Stagger Up & Down: Elegant vertical reveals where letters or lines enter sequentially from above or below.

  • Slide in Left & Right: Modern horizontal reveals that glide text into position from either side.

  • Scroll Reveal: An interactive highlighting effect that illuminates text as the user scrolls down the page.

  • Elastic Pop: A playful, physics-based entrance with a bouncy overshoot for high-energy sections.

  • Portal: A cinematic "duplicate" effect where characters slide out of a hidden mask to replace their clones.

  • Wave: A fluid, rhythmic motion that creates a rolling wave effect across the sentence.

  • Flow: A sophisticated 3D-tilt entrance that combines scaling and rotation for a premium feel.

• Precision Splitting (Characters vs. Words) The engine intelligently switches between chars and words splitting based on your animation type, ensuring every letter or phrase moves with mathematical precision.

• Dynamic Scroll Scrubbing In Scrub mode, text transitions from a "Base Opacity" to your "Highlight Color" based on the viewport position. You control exactly where the animation starts and ends via percentage sliders.

• Integrated Motion Blur Toggle a high-end Gaussian blur effect that syncs with the movement, mimicking the look of professional film credits and high-end agency sites.

• Multi-Instance Scoping Built with gsap.context, the component is engineered to work perfectly even if you have 10+ instances on a single page—no animation collisions or "freezing" bugs.

• SEO-Friendly Tagging Stay rank-ready by selecting your HTML tag (H1 through P) directly in the properties panel without affecting the animation logic.

• Optimized Canvas Performance The component intelligently detects when you are in the Framer Canvas, showing a clean, static preview for a frustration-free design experience.

Use Cases

• Hero Headlines: Use "Stagger (Up)" to grab attention immediately on page load.

• Narrative Sections: Use "Scroll Scrub" to keep users engaged as they read through long-form mission statements.

• Feature Callouts: Use "Side Slide" to introduce new sections with a sense of direction and energy.

Key Benefits

• Native Framer Workflow: Unlike other code components that force you to use a separate UI, this engine works directly with Framer Text Properties. Adjust fonts, weights, and colors using the panels you already know.

• Performance First: Built with optimized GSAP context and splitting logic, ensuring high frame rates (60fps+) even on content-heavy pages.