Scroll Text Effects

Premium Interactions Component by Nabeel

Show PreviewBuy for $14
Scroll Text Effects

About Scroll Text Effects

About

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

Instructions

  1. Copy and paste the StickyBlurReveal component into your Framer project file

  2. Wrap the component in a layer that is 100vh and set the container to sticky

  3. Now wrap that container inside another container with a height that represents the scroll duration

  4. Add the component to your canvas and enter your desired text in the Text property

  5. Customize the typography settings (font, size, color, alignment) and reveal behavior (blur amount, opacity, scale, reveal distance) using the property controls panel

  6. Adjust the 3D transformation settings (perspective, rotation, vertical offset) to achieve your desired visual effect

  7. Preview your project to test the scroll-triggered animation and fine-tune the settings as needed

How It Works

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.

Support

For any queries and help setting up the component, contact hello@segmentui.com

Refund Policy

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.