animare/src/preact/useScrollAnimation.ts

Advanced animation library for modern JavaScript.

import { scrollAnimation } from 'animare/plugins';
import { useEffect } from 'preact/hooks';

import type { ScrollAnimationOptions } from '../types.js';

/**
 *
 * 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<Name extends string>(options: ScrollAnimationOptions<Name>, deps: React.DependencyList = []) {
  useEffect(() => {
    const unSub = scrollAnimation(options);
    return unSub;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [options.timeline, ...deps]);
}