Scroll Reel

GSAP Text Animator

How to use it: It’s completely plug-and-play. Just drag and drop the component onto your Framer canvas, type your text, resize the bounding box, and customize the fonts. The complex GSAP animation logic is entirely handled for you in the properties panel! 1. 🎯 Where can I use this component? This component is perfect for adding high-end kinetic typography to modern websites: Hero Headlines: Instantly grab attention as the user lands on your page with rolling, mechanical text. Feature Callouts: Highlight key phrases on SaaS, Web3, or tech websites. Creative Portfolios: Show off your design edge with Awwwards-style typography effects. Statistics & Numbers: Perfect for data-heavy sections, making text feel like a ticking odometer or stock ticker. 2. ✨ Features 🎰 Slot-Machine Loop Effect: After the initial reveal, random characters will automatically flip up or down at set intervals to keep the page feeling alive and dynamic. 📜 Built-in ScrollTrigger: Choose to animate the text automatically when it enters the viewport, and reverse it when the user scrolls away. (Fully customizable start/end points!). ⚖️ Auto-Balancing Typography: Built with modern CSS text-wrap: balance, ensuring your headlines always look perfect and never leave an awkward single word (widow) on the last line. 🎛️ Deep Animation Controls: Tweak the stagger speed, easing (Bounce, Elastic, Expo, etc.), animation duration, and the direction of the text rolls (Up, Down, or Random). 🎨 Full Styling Control: Complete control over your fonts, weights, line heights, and colors directly from the Framer sidebar. 🎮 Manual Trigger Mode: Want to trigger the animation via a button click or component state? Switch from "Scroll" to "Manual" mode for event-driven animations.

GSAP Text Animator