The revealText() function is a JavaScript utility that leverages the GreenSock Animation Platform (GSAP) and ScrollTrigger to animate text elements on a webpage as the user scrolls. The function targets HTML elements marked with the attribute animate="text", splits these elements into lines, words, and characters, and applies a fade-in animation to each word. The animation is triggered when the words enter a specific viewport area defined by ScrollTrigger settings.
The function begins by selecting all elements with the animate="text" attribute. Each selected text element is then processed using the SplitType library to break the text into smaller segments (lines, words, and characters). Each word is wrapped in a <span> tag. The GSAP library is then used to animate these words from an initial opacity of 0.15 to full visibility. The animation includes properties such as duration, easing, and stagger to enhance the visual effect. ScrollTrigger is used to start the animation when the words are in view, making the animation occur dynamically as the user scrolls.
To implement this function:
- Include the GSAP, ScrollTrigger, and SplitType libraries in your project.
- Ensure HTML text elements have the animate="text" attribute.
- Call the revealText() function after the page content is fully loaded, ideally using a DOMContentLoaded event listener.
This function is customizable in terms of which elements to target, how text is split, and the specifics of the animation effect. Adjustments can be made to the ScrollTrigger start and end points, animation duration, opacity, and stagger values to fit different design needs.
.png)