Bouncing Text

1"use client";
2 
3import { ComponentProps, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7import { SplitText } from "gsap/SplitText";
8 
9type BouncingTextProps = {
10    repeat?: boolean | number;
11} & ComponentProps<"p">;
12 
13export const BouncingText = ({ repeat = true, ...props }: BouncingTextProps) => {
14    const textRef = useRef<HTMLParagraphElement | null>(null);
15 
16    useGSAP(
17        () => {
18            if (!textRef.current) return;
19            let bounceCount = 0;
20            const bounceChars = new SplitText(textRef.current, { type: "words,chars" }).chars;
21            bounceChars.forEach((el) => {
22                const tl = gsap.timeline({ repeat: repeat === true ? -1 : repeat === false ? 0 : repeat });
23                tl.to(el, {
24                    duration: 0,
25                    y: -200,
26                });
27                tl.to(el, {
28                    duration: 2,
29                    y: 0,
30                    rotate: -10,
31                    ease: "bounce",
32                });
33                tl.to(el, {
34                    duration: 1,
35                    y: 0,
36                    rotate: 0,
37                    ease: "bounce",
38                });
39                tl.to(el, {
40                    duration: 2,
41                    y: -200,
42                    rotate: 0,
43                    delay: 1,
44                    ease: "elastic",
45                });
46                tl.delay(bounceCount / 8);
47                bounceCount++;
48            });
49        },
50        { scope: textRef },
51    );
52 
53    return <p {...props} ref={textRef} />;
54};