Resources
Desktop app
Marketplace
Community
Developers
Wallpapers
Meetups
Company
Security
Careers
Report
Status
Legal
Blog
Creators
Program
Payouts
Experts
Awards
Events
Brand
Compare
Squarespace
Wordpress
Unbounce
Webflow
Figma
Wix
Solutions
Figma to HTML
Website builder
Portfolio maker
Landing pages
UI/UX design
No-code
Socials
Instagram
X Twitter
YouTube
LinkedIn
Threads
TikTok
    Component preview thumbnail
    MarketplaceComponents

    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

    Nabeel
    Nabeel
    Creator
    5h ago
    Updated
    9
    Views
    Nabeel
    Nabeel
    Creator
    5h ago
    Updated
    9
    Views

    Make it with Workshop

    Build your own component with AI

    Framer
    EnterprisePricing
    LoginSign up
    Enterprise
    Pricing
    Login
    Sign up
    Marketplace
    TemplatesPluginsComponents
    Templates
    Plugins
    Components

    About

    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

    Instructions

    1. Copy and paste the GradientMask component into your project file

    2. Enter your desired text in the Text field in the properties panel

    3. Customize the appearance settings - adjust colors, font properties, and text layout

    4. Configure the mask settings by choosing the mask type and adjusting the mask angle and width

    5. Fine-tune the animation by setting the reveal distance and scroll offset to control when and how the text appears

    6. Test the animation in preview mode to see how it responds to scrolling

    How It Works

    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)

    What You Get

    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.

    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.

    Support
    About ComponentsRefund PolicyContact Creator

    More Components

    See All →
    Thumbnail for LoadingSpinner, a Framer Marketplace template by Shaigexp.
    LoadingSpinner
    $5
    Shaigexp
    Thumbnail for PublishedDate, a Framer Marketplace template by Sadiq Abdulqudus.
    PublishedDate
    Free
    Sadiq Abdulqudus
    Thumbnail for Playful Cursor Trail, a Framer Marketplace template by Aamir Saifi.
    Playful Cursor Trail
    $5
    Aamir Saifi
    Thumbnail for CMS Accordion, a Framer Marketplace template by Nitso.
    CMS Accordion
    $14
    Nitso
    Thumbnail for 005 Digital Poster, a Framer Marketplace template by 099 Supply.
    005 Digital Poster
    $4
    099 Supply
    Thumbnail for Star Border Button, a Framer Marketplace template by Daniyal Asif.
    Star Border Button
    $1
    Daniyal Asif
    Thumbnail for Vinyl Audio Player, a Framer Marketplace template by Nabeel.
    Vinyl Audio Player
    $9
    Nabeel
    Thumbnail for Easy FAQ Builder, a Framer Marketplace template by Rafa Vaz.
    Easy FAQ Builder
    $5
    Rafa Vaz

    More from Nabeel

    See All →
    Thumbnail for Keyboard Movement, a Framer Marketplace component by Nabeel.
    Keyboard Movement
    component · $14
    Nabeel
    Thumbnail for Vinyl Audio Player, a Framer Marketplace component by Nabeel.
    Vinyl Audio Player
    component · $9
    Nabeel
    Thumbnail for Enlarge & Drag, a Framer Marketplace component by Nabeel.
    Enlarge & Drag
    component · $14
    Nabeel
    Thumbnail for Press & Hold Button, a Framer Marketplace component by Nabeel.
    Press & Hold Button
    component · $9
    Nabeel
    Thumbnail for Text Image Heading, a Framer Marketplace component by Nabeel.
    Text Image Heading
    component · $4
    Nabeel
    Thumbnail for CAPTCHA for Forms, a Framer Marketplace component by Nabeel.
    CAPTCHA for Forms
    component · $14
    Nabeel
    Thumbnail for Form Maths, a Framer Marketplace component by Nabeel.
    Form Maths
    component · $14
    Nabeel
    Thumbnail for Noisy Blur, a Framer Marketplace component by Nabeel.
    Noisy Blur
    component · $4
    Nabeel