Documentation
This creates a smooth, scroll-based text animation where multiple stacked headings are revealed sequentially. The headings animate in and out using GSAP’s ScrollTrigger and SplitText, emphasizing your content as users scroll.
HTML Structure & Requirements
Wrapper Element:
Use an element with the attribute data-sticky-title="wrap".
Set its height to define the scrolling area (for example, height: 300vh; or any value you decide based on the number of headings).
Sticky Container:
Inside the wrapper, include a sticky container (e.g.,
).
Important: Ensure that no parent element has overflow: hidden, as this is crucial for the sticky behavior to work properly.
Headings:
Add your headings with the attribute data-sticky-title="heading".
In CSS, the headings meant to stack are hidden (for example, using classes like .is--stacked which set visibility: hidden and position: absolute).
This structure allows you to have as many headings as you want; just make sure you update the height of the wrapper accordingly.
How It Works
Dynamic Setup:
The resource scans for all wrappers and their respective headings on the page.
SplitText & ARIA:
Each heading is split into words and characters using GSAP’s SplitText, while the full text is preserved in an aria-label for accessibility.
The individual words are hidden from screen readers via aria-hidden="true".
Animation Timeline:
A master timeline (per wrapper) handles the sequential animation.
Each heading fades in first (revealing the characters in sequence) and, if it’s not the final heading, fades out (with characters disappearing in reverse order) before the next heading starts its reveal.
A slight overlap can be implemented between fade-out and the next fade-in for a more dynamic transition.
Useful Tip
For an extra smooth scroll effect, consider integrating Lenis for smooth scrolling.