useAutoPause

A custom react hook to make it easy to create auto pause animations in React.

syntax

function autoPause(timeline: TimelineObject, element: Element, options?: AutoPauseOptions, deps?: React.DependencyList): void;

Based on autoPause

Usage

Useful when you have an infinite repeating animation to save resources.

Tip

It can be used to auto play the animation when the element becomes visible

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 }, []);
}