Scroll Text Effects
This code creates a special effect for text on websites. It makes words appear in a fun way as people scroll down the page.
Make it with Workshop
Build your own component with AI
This code creates a special effect for text on websites. It makes words appear in a fun way as people scroll down the page.
Make it with Workshop
Build your own component with AI
This code creates a special effect for text on websites. It makes words appear in a fun way as people scroll down the page. The text starts off hard to see, then gradually becomes clear and normal. It does this by changing several things about how the text looks while scrolling. The effect can be applied to whole words or individual letters. Users can adjust many settings to change exactly how this effect works and looks.
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Copy and paste the StickyBlurReveal component into your Framer project file
Wrap the component in a layer that is 100vh and set the container to sticky
Now wrap that container inside another container with a height that represents the scroll duration
Add the component to your canvas and enter your desired text in the Text property
Customize the typography settings (font, size, color, alignment) and reveal behavior (blur amount, opacity, scale, reveal distance) using the property controls panel
Adjust the 3D transformation settings (perspective, rotation, vertical offset) to achieve your desired visual effect
Preview your project to test the scroll-triggered animation and fine-tune the settings as needed
The component includes comprehensive property controls for text content, typography (font, size, color, alignment, line height), reveal settings (full reveal distance, initial blur amount, opacity, scale), positioning (vertical offset), and 3D effects (perspective, X-rotation). All properties have intuitive ranges and step values for precise customization.
For any queries and help setting up the component, contact hello@segmentui.com
If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.
