Unblur Text on Scroll

Cool unblur text effect when scrolling, build in Next.js using GSAP ScrollTrigger. The preview is in the bottom of this page.

Tech Stack #

  • Next.js
  • Typescript
  • GSAP
  • ScrollTrigger Plugin
  • SplitText Plugin
  • useGSAP Plugin
  • Tailwind CSS

Components #

components/animated-text.tsx
"use client";

import { ReactNode, useRef } from "react";
import gsap from "gsap";
import { SplitText } from "gsap/SplitText";
import { useGSAP } from "@gsap/react";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(SplitText, ScrollTrigger, useGSAP);

export function AnimatedText({ children }: { children: ReactNode }) {
  const containerRef = useRef<HTMLDivElement | null>(null);

  useGSAP(
    () => {
      if (!containerRef.current) return;

      async function startAnimating() {
        await document.fonts.ready;

        SplitText.create(containerRef.current, {
          type: "lines",
          autoSplit: true,
          linesClass: "animated-line will-change-[opacity,filter]",
          onSplit: (self) => {
            gsap.set(self.lines, {
              filter: "blur(10px)",
              opacity: 0,
            });
            self.lines.forEach((line) => {
              gsap.to(line, {
                filter: "blur(0px)",
                opacity: 1,
                scrollTrigger: {
                  trigger: line,
                  start: "top 95%",
                  end: "top 50%",
                  scrub: true,
                },
              });
            });
          },
        });
      }

      startAnimating();
    },
    {
      scope: containerRef,
    }
  );

  return (
    <div ref={containerRef}>
      {children}
    </div>
  );
}

Implementation #

<AnimatedText>
  <p className="text-4xl text-center leading-tight">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo
    ipsum culpa facere corrupti! Nobis suscipit in modi velit hic
    obcaecati facere laudantium, ipsa, nihil beatae harum commodi cumque
    eum optio.
  </p>
</AnimatedText>

Preview #

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo ipsum culpa facere corrupti! Nobis suscipit in modi velit hic obcaecati facere laudantium, ipsa, nihil beatae harum commodi cumque eum optio.