AutoPause

Uses the IntersectionObserver API to automatically pauses the animation when the element is not visible.

Resumes the timeline when the element becomes visible, even if the timeline was not playing before.

syntax

function autoPause(timeline: TimelineObject, element: Element, options?: AutoPauseOptions): () => void;

Usage

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

To use with React see: useAutoPause

example

import animare from 'animare';
import { autoPause } from 'animare/plugins';

// The element to track when entering and exiting the viewport
const element = document.getElementById('element');

const myTimeline = animare.timeline(...params);

const unsubscribe = autoPause(myTimeline, element);

unsubscribe(); // Disconnect the intersection observer

Timeline

timeline: TimelineObject Required

The timeline return object.

See: TimelineObject

Element

element: Element Required

The element to track when entering and exiting the viewport.

Options

options?: AutoPauseOptions Default: {}

root

root?: Element | Document | null Default: null

The root element to use for the intersection observer. If not provided, the default is null which means the viewport.

See: IntersectionObserver

rootMargin

rootMargin?: string Default: '0px 0px 0px 0px'

The margin around the root element to use for the intersection observer.

See: IntersectionObserver

threshold

threshold?: number | number[] Default: 0

The threshold to use for the intersection observer, between 0 and 1.

See: IntersectionObserver

forcePlay

forcePlay?: boolean Default: true

Whether to force the timeline to play even if the element is not paused when entering the viewport.

Tip

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

onVisibilityChange()

onVisibilityChange?: (isVisible: boolean) => void Default: undefined

Callback to call when the element enters or leaves the viewport.