Spring Button

1"use client";
2 
3import { ComponentProps, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7 
8type SpringButtonProps = {
9    scale?: number;
10    shaking?: boolean;
11} & ComponentProps<"button">;
12 
13export const SpringButton = ({ scale = 0.85, shaking = true, ...props }: SpringButtonProps) => {
14    const buttonRef = useRef<HTMLButtonElement | null>(null);
15    const pressed = useRef(false);
16 
17    useGSAP(
18        () => {
19            const element = buttonRef.current;
20            if (!element) return;
21            let pressTimeline = gsap.timeline();
22            let shakingTimeline = gsap.timeline({ repeat: -1 });
23 
24            const press = () => {
25                pressed.current = true;
26                pressTimeline.pause(0);
27                pressTimeline.kill();
28                pressTimeline = gsap.timeline();
29                shakingTimeline = gsap.timeline({ repeat: -1 });
30 
31                pressTimeline.to(element, {
32                    scale: scale,
33                    duration: 1,
34                    ease: "power4.out",
35                });
36 
37                if (shaking) {
38                    pressTimeline.add(shakingTimeline);
39                    shakingTimeline
40                        .to(element, { x: -1, y: 1, duration: 0.08 })
41                        .to(element, { x: 1, y: -1, duration: 0.08 })
42                        .to(element, { x: -0.5, y: -0.5, duration: 0.08 })
43                        .to(element, { x: 0.5, y: 0.5, duration: 0.08 })
44                        .to(element, { x: 0, y: 0, duration: 0.08 });
45                }
46            };
47 
48            const release = () => {
49                pressed.current = false;
50                if (shakingTimeline) {
51                    shakingTimeline.pause(0);
52                    shakingTimeline.kill();
53                }
54                gsap.to(element, {
55                    scale: 1,
56                    duration: 0.5,
57                    ease: "elastic.out(1.4, 0.2)",
58                    onComplete: () => {
59                        if (!pressed.current && pressTimeline) {
60                            pressTimeline.pause(0);
61                            pressTimeline.kill();
62                        }
63                    },
64                });
65            };
66 
67            element.addEventListener("mousedown", press);
68            element.addEventListener("touchstart", press);
69            element.addEventListener("mouseup", release);
70// … truncated