Unmask Text on Scroll

The unmask-text-on-scroll plugin creates a smooth, line-by-line reveal animation for text blocks as they enter the viewport. It leverages GSAP’s ScrollTrigger and SplitText plugins to split the text into lines and animate them upwards from a masked position, creating a dynamic reading experience.

In development, it is implemented in assets/js/modules/unmask-text-on-scroll.js and is initialized automatically by assets/js/main.js.

Markup Requirements

To use the plugin, simply add the data-unmask-text-on-scroll attribute to any text element (like a heading or a paragraph).

Notes:

The plugin splits the text into words and lines using GSAP’s SplitText with type: "words,lines" and mask: "lines".
The reveal animation starts when the top of the element hits the bottom of the viewport (start: "top 100%") and scrubs until the bottom of the element reaches the center of the viewport (end: "bottom 50%").
All start and end values are automatically wrapped with GSAP’s clamp() function to prevent the ScrollTrigger from starting or ending beyond the scroll range.
It applies an initial state of opacity: 0 and yPercent: 120 to the lines, staggering the animation by 0.3 seconds per line.
A data-unmaskTextOnScrollGenerated dataset attribute is applied after initialization to prevent duplicate processing.

Customizing animation values

You can override the default animation behavior per-instance by adding any of the following optional data attributes:

Attribute	Default	Description
`data-unmask-text-on-scroll-y-percent`	`120`	The initial vertical offset (in percent) before the text unmasks.
`data-unmask-text-on-scroll-stagger`	`0.3`	The delay (in seconds) between unmasking each line.
`data-unmask-text-on-scroll-duration`	`1.5`	The duration (in seconds) of each line’s unmasking animation.
`data-unmask-text-on-scroll-start`	`top 100%`	The ScrollTrigger `start` position.
`data-unmask-text-on-scroll-end`	`bottom 50%`	The ScrollTrigger `end` position.

Markup Example

Below is an example markup of the plugin used on a heading from the pricing page. Key details are included in the HTML comments:


<!-- Start: Default animation (all defaults apply) -->
<h2 class="text-4xl font-medium md:text-5xl" data-unmask-text-on-scroll>
  Everything you get at
  <span class="text-muted-foreground">every tier </span>
</h2>
<!-- End: Default animation -->
 
<!-- Start: Custom animation (faster stagger, earlier scroll start) -->
<h2 class="text-4xl font-medium md:text-5xl" 
  data-unmask-text-on-scroll
  data-unmask-text-on-scroll-stagger="0.1"
  data-unmask-text-on-scroll-start="top 80%">
  Customized unmasking
  <span class="text-muted-foreground">experience </span>
</h2>
<!-- End: Custom animation -->

Demo Example

View the complete code sample on this page.

StatixFlow Unmask Text on Scroll Example

About page