animated-tab-bar

1"use client";
2 
3import React, { useEffect, useRef, useState } from "react";
4import gsap from "gsap";
5import "./animated-tab-bar.css";
6 
7 
8// Attempt to register MorphSVGPlugin if available. 
9// Note: MorphSVGPlugin is a paid Club GreenSock plugin. 
10// If your project does not have it installed/configured, the morphing animations will not work, 
11// but the other animations (scale, opacity, etc.) should still function if we guard against it.
12if (typeof window !== "undefined") {
13    try {
14        // Dynamic import to avoid build-time errors if the plugin is missing from node_modules
15        // @ts-ignore
16        import("gsap/MorphSVGPlugin").then((plugin) => {
17            gsap.registerPlugin(plugin.MorphSVGPlugin);
18        }).catch(e => {
19            console.warn("GSAP MorphSVGPlugin not found. Morphing animations will be disabled.", e);
20        });
21    } catch (e) {
22        console.warn("GSAP MorphSVGPlugin not found.", e);
23    }
24}
25 
26export const AnimatedTabBar = () => {
27    const [activeTab, setActiveTab] = useState("home");
28    // Refs for buttons and paths
29    const homeRef = useRef<HTMLButtonElement>(null);
30    const chartRef = useRef<HTMLButtonElement>(null);
31    const markerRef = useRef<HTMLButtonElement>(null);
32    const trophyRef = useRef<HTMLButtonElement>(null);
33    const userRef = useRef<HTMLButtonElement>(null);
34 
35    const homePathRef = useRef<SVGPathElement>(null);
36    const chartPathRef = useRef<SVGPathElement>(null);
37    const markerPathRef = useRef<SVGPathElement>(null);
38    const trophyPathRef = useRef<SVGPathElement>(null);
39    const userPathRef = useRef<SVGPathElement>(null);
40    const trophyButtonRef = useRef<HTMLButtonElement>(null);
41    const userButtonRef = useRef<HTMLButtonElement>(null);
42 
43    useEffect(() => {
44        // Register the plugin if it wasn't picked up by the dynamic import yet (race condition possible but usually fine for click interactions)
45        // or if we need to ensure it's loaded.
46        // Ideally we check if gsap.plugins.morphSVG is defined before running morph tweens
47    }, []);
48 
49    const handleTabClick = (tab: string, buttonRef: React.RefObject<HTMLButtonElement>, pathRef: React.RefObject<SVGPathElement>, callback: (btn: HTMLElement, path: SVGElement) => void) => {
50        if (activeTab === tab) return;
51        setActiveTab(tab);
52        if (buttonRef.current && pathRef.current) {
53            callback(buttonRef.current, pathRef.current);
54        }
55    };
56 
57// … truncated