Scroll Text Transition is a fully customizable Framer component that animates three paragraphs word by word based on scroll position. As the user scrolls, the first paragraph slides out, the second transitions through, and the third reveals in creating a seamless, cinematic text experience.
Built with Framer Motion and optimized for performance, every word animates independently with a natural overlap, giving the effect a fluid, organic feel rather than a robotic sequence.
Customize font family, size, weight, line height, letter spacing, and alignment directly from the Framer properties panel. Adjust text color and scroll height without touching any code.
No dependencies beyond Framer Motion. Drop it into any Framer project and it works instantly.
⚠️ Requirements & Usage Notes:
Minimum scroll height is 100vh. For best results use 300vh or more.
Do NOT set height from the Framer canvas handle or native size panel. Use the Scroll Height property in the component panel only resizing from the canvas will break the scroll animation.
If placed inside a Stack or any parent frame, set the parent height to Fit Content a fixed height on the parent will clip or break the scroll animation.
Place the component on a scrollable page, not inside an overflow hidden frame or fixed container.
Component must be full width to render correctly across all three text columns.
Recommended font size is 24px–48px for optimal word animation visibility.
Scroll Text Transition is a fully customizable Framer component that animates three paragraphs word by word based on scroll position. As the user scrolls, the first paragraph slides out, the second transitions through, and the third reveals in creating a seamless, cinematic text experience.
Built with Framer Motion and optimized for performance, every word animates independently with a natural overlap, giving the effect a fluid, organic feel rather than a robotic sequence.
Customize font family, size, weight, line height, letter spacing, and alignment directly from the Framer properties panel. Adjust text color and scroll height without touching any code.
No dependencies beyond Framer Motion. Drop it into any Framer project and it works instantly.
⚠️ Requirements & Usage Notes:
Minimum scroll height is 100vh. For best results use 300vh or more.
Do NOT set height from the Framer canvas handle or native size panel. Use the Scroll Height property in the component panel only resizing from the canvas will break the scroll animation.
If placed inside a Stack or any parent frame, set the parent height to Fit Content a fixed height on the parent will clip or break the scroll animation.
Place the component on a scrollable page, not inside an overflow hidden frame or fixed container.
Component must be full width to render correctly across all three text columns.
Recommended font size is 24px–48px for optimal word animation visibility.
