On Scroll Text Mask
This code creates a special effect for text on websites. It makes words appear gradually 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 gradually 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 gradually as people scroll down the page. The text is revealed using a moving mask, which can be different shapes like a line, circle, or cone. As you scroll, this mask moves to show more of the text. Users can change many things about how the text looks and how it appears, like its color, size, and how fast it shows up. This effect makes reading on a website more interesting and fun.
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 GradientMask component into your project file
Enter your desired text in the Text field in the properties panel
Customize the appearance settings - adjust colors, font properties, and text layout
Configure the mask settings by choosing the mask type and adjusting the mask angle and width
Fine-tune the animation by setting the reveal distance and scroll offset to control when and how the text appears
Test the animation in preview mode to see how it responds to scrolling
The component uses several customizable properties:
Text content and styling (font, size, color, line height)
Mask properties (type, angle, width)
Animation controls (reveal distance, scroll offset)
Three mask types: linear (straight), radial (circular), and conic (rotating)
When you purchase this component, you'll receive:
The Component Itself - Full access to the component all future updates
Remix File with Component Setup - A complete Remix file with the component pre-configured and ready to integrate into your project.
Setup Instructions - Clear, step-by-step instructions to help you implement the component quickly and correctly.
Dedicated Support - Direct access to our team for assistance if you encounter any issues during setup or implementation.
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.
