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.
See live demo here https://gsap-text-animate.framer.website/
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.
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.
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.
Victor Adekunle
