// SplitType is a great alternative to SplitText, with a lot of the core // features of SplitText, but completely free // Remember to have the following script tag in your HTML: // <script src="https://unpkg.com/split-type"></script> // Check if user prefers reduced motion let prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if(!prefersReducedMotion) { // Disable font kerning to prevent possible text shifting during reversion // or splitting document.querySelector("h1#myFancyText").style.fontKerning = "none"; // Split the text let text = new SplitType("h1#myFancyText"); // Animate it using normal GSAP gsap.from(text.chars, { duration: 1, y: "+=60px", stagger: 0.05, ease: "power3", onComplete: () => { // If you want, you can revert the text afterward text.revert(); } }); }