import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
let stashedTime;
/**
 *
 * @param animationName The unique name of the animation to be synchronized
 * @returns a reference to the object with the synchronized animation time
 */ function useSynchronizedAnimation(animationName) {
    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)();
    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
        // Gets all animations of the same type
        const animations = document.getAnimations().filter((animation)=>animation.animationName === animationName);
        // Targets the animation effect to match the reference
        const myAnimation = animations.find((animation)=>(animation?.effect).target === ref.current);
        // Starts off the animation at the same as previously stashed time
        if (myAnimation && myAnimation === animations[0] && stashedTime) myAnimation.currentTime = stashedTime;
        // Synchronizes the subsequent animations of the same type
        if (myAnimation && myAnimation !== animations[0]) myAnimation.currentTime = animations[0].currentTime;
        // Ensures there is no "jank" where the animation glitches and resets upon rerendering
        return ()=>{
            if (myAnimation && myAnimation === animations[0] && myAnimation.currentTime) stashedTime = myAnimation.currentTime;
        };
    }, [
        animationName
    ]);
    return ref;
}
export { useSynchronizedAnimation as default };
