animare/lib/module/react/useScrollAnimation.js

Advanced animation library for modern JavaScript.

import{scrollAnimation}from'animare/plugins';import{useEffect}from'react';/**
 *
 * Makes the scroll progress control the timeline.
 *
 * @param options — The options for configuring the scroll-controlled animation.
 * @returns — A function to remove the scroll event listener.
 *
 * @example
 * const scrollAnim = useAnimare(() => {
 *    // ...
 * });
 *
 * useScrollAnimation({
 *  timeline: scrollAnim,
 *  element: document.querySelector<HTMLDivElement>('.block')!,
 *  start: ScrollElementEdge.Bottom,
 *  end: ScrollElementEdge.Top,
 *  startOffset: 100,
 * });
 */export function useScrollAnimation(options){let deps=arguments.length>1&&arguments[1]!==undefined?arguments[1]:[];useEffect(()=>{const unSub=scrollAnimation(options);return unSub;// eslint-disable-next-line react-hooks/exhaustive-deps
},[options.timeline,...deps]);}