Search the Community

here's my React.js component: React, { useRef, useState, useEffect, useCallback } from "react"; import { Avatar, Card, CardBody, Typography } from "@material-tailwind/react"; import gsap from "gsap"; import { Draggable } from "gsap/all"; import { Quote } from "lucide-react"; import InertiaPlugin from "gsap-trial/InertiaPlugin"; // Register GSAP plugins if (typeof window !== "undefined") { gsap.registerPlugin(Draggable, InertiaPlugin); } interface ReviewsProps { data: CommentCardProps[]; } const Reviews: React.FC<ReviewsProps> = ({ data }: ReviewsProps) => { const wrapperRef = useRef<HTMLDivElement | null>(null); const itemsRef = useRef<HTMLDivElement[]>([]); // Initialize carouselData as an empty array to avoid null checks const [itemHeight, setItemHeight] = useState<number>(0); // Initialize windowWidth with a default value (e.g., 0) and update it in useEffect const [windowWidth, setWindowWidth] = useState<number>(0); // Measure the height of the carousel display after it mounts const measuredRef = useCallback((node: HTMLDivElement | null) => { if (node !== null) { setItemHeight(node.getBoundingClientRect().height); } }, []); // Add references to carousel items const addToRefs = useCallback((el: HTMLDivElement | null) => { if (el && !itemsRef.current.includes(el)) { itemsRef.current.push(el); } }, []); // Create GSAP animation timeline const createAnimation = ( carouselItems: HTMLDivElement[], width: number ): gsap.core.Timeline | undefined => { if (carouselItems.length > 0) { const timeline = gsap.timeline({ repeat: -1, paused: true }); timeline.to(carouselItems, { duration: 1, x: `+=${width}`, ease: "linear", overwrite: "auto", // repeat: -1, modifiers: { x: (x) => { const parsedX = parseFloat(x) % width; return `${parsedX}px`; }, }, }); return timeline.progress(1 / carouselItems.length); } return undefined; }; // Initialize carousel animation const carouselAnimation = useCallback(() => { const carouselItems = itemsRef.current; if (!carouselItems.length) return; const itemWidth = carouselItems[0].clientWidth; const carouselWidth = itemWidth * carouselItems.length; const snapBox = gsap.utils.snap(itemWidth); // Set initial positions of carousel items carouselItems.forEach((elm, i) => { gsap.set(elm, { x: i * itemWidth, left: -itemWidth }); }); // Set the height of the wrapper if (wrapperRef.current) { gsap.set(wrapperRef.current, { height: itemHeight }); } const wrapProgress = gsap.utils.wrap(0, 1); const proxy = document.createElement("div"); const timeline = createAnimation(carouselItems, carouselWidth); if (timeline) { Draggable.create(proxy, { trigger: "#elm", throwProps: true, inertia: true, dragResistance: 0.55, onDrag: updateProgress, onThrowUpdate: updateProgress, dragClickables: true, snap: { x: snapBox, // Ensure correct type }, }); } function updateProgress() { if (timeline) { const progress = gsap.getProperty(proxy, "x") as number; timeline.progress(wrapProgress(progress / carouselWidth)); } } }, [createAnimation, itemHeight]); // Set initial carousel data // Handle window resize and initialize carousel animation useEffect(() => { // Define a function to update window width const handleWindowResize = () => setWindowWidth(window.innerWidth); // Set initial window width handleWindowResize(); // Add resize event listener window.addEventListener("resize", handleWindowResize); // Initialize carousel animation carouselAnimation(); // Cleanup event listener on unmount return () => { window.removeEventListener("resize", handleWindowResize); }; }, [carouselAnimation]); return ( <div className="carousel-container-try" id="wrapper" ref={wrapperRef}> <div className="carousel-display-try h-96" ref={measuredRef}> {data.map((_, i) => ( <div key={i} id="elm" className="carousel-display-try__item" ref={addToRefs} > <CommentCard key={i} name={_.name} comment={_.comment} position={_.position} profile={_.profile} /> </div> ))} </div> </div> ); }; // {carouselData.map((item) => ( // <div // key={item} // id="elm" // className="carousel-display-try__item" // ref={addToRefs} // > // {item} // </div> // ))} type CommentCardProps = { name: string; position: string; comment: string; profile: string; }; function CommentCard({ comment, name, position, profile }: CommentCardProps) { return ( <> <Card className="py-2 px-4 w-96 bg-tertiary dark:bg-primary mx-2"> <CardBody className="flex flex-col justify-between gap-4"> <div className="flex items-start"> <Quote className="w-6 h-6 text-secondary" /> </div> <Typography className="text-lg text-secondary">{comment}</Typography> <div className="flex items-end"> <Quote className="w-6 h-6 text-secondary" /> </div> <hr className="my-2 h-[1px] border-t-0 bg-secondary" /> <div className="flex gap-4 items-center"> <Avatar src={profile} alt="astronout" /> <div className="flex flex-col gap-q"> <Typography className="text-lg font-bold text-secondary"> {name} </Typography> <Typography className="text-base text-secondary/50"> {position} </Typography> </div> </div> </CardBody> </Card> </> ); } export default Reviews; I want to use that inertia effect when I drag my content without InertiaPlugin, anyone maybe even tried that?