animare
Version:
Advanced animation library for modern JavaScript.
34 lines • 1.8 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:true});exports.useAutoPause=useAutoPause;var _plugins=require("animare/plugins");var _react=require("react");/**
* Automatically pauses the animation when the element is not visible.
*
* Uses the IntersectionObserver API.
*
* Plays the timeline when the element becomes visible, even if the timeline was not playing before.
*
* Pauses the timeline when the element is not visible.
*
* @param timeline - The animation object returned by animare.
* @param element - The HTML element to track when entering and exiting the viewport.
* @param deps - The dependencies for the effect.
* @returns A function to remove the intersection observer and stop tracking visibility.
*
* @example
* import animare from 'animare';
* import { useAnimare, useAutoPause } from 'animare/react';
*
* function MyComponent() {
* // The element to track when entering and exiting the viewport
* const elementRef = useRef(null);
*
* const myTimeline = useAnimare(() => {
* return animare.timeline(...params);
* });
*
* useAutoPause(myTimeline, elementRef.current, []);
*
* // or you can pass in the observer options
* useAutoPause(myTimeline, elementRef.current, { threshold: 0.2 }, []);
* }
* }
*/function useAutoPause(timeline,element,observerOptionsOrDeps){let deps=arguments.length>3&&arguments[3]!==undefined?arguments[3]:[];const dependencies=Array.isArray(observerOptionsOrDeps)?observerOptionsOrDeps:deps;(0,_react.useEffect)(()=>{if(!timeline||!element)return;const observerOptions=Array.isArray(observerOptionsOrDeps)?{}:observerOptionsOrDeps;return(0,_plugins.autoPause)(timeline,element,observerOptions);// eslint-disable-next-line react-hooks/exhaustive-deps
},[timeline,element,...dependencies]);}