scrollAnimation

Makes the scroll progress control the timeline.

syntax

function scrollAnimation(options: ScrollAnimationOptions): () => void;

Usage

To use with React see: useScrollAnimation

example

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

const timeline = animare(...params);

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

const unsubscribe = scrollAnimation({
  timeline: timeline,
  element: element,
});

unsubscribe(); // Removes the scroll event listener

Options

options: ScrollAnimationOptions Required

timeline

timeline: TimelineObject Required

The returned animation object.

See: TimelineObject

element

element: HTMLElement Required

The HTML element to track when entering and exiting the viewport.

root

root?: HTMLElement Default: document.documentElement

The root element that has the scrollable area.

axis

axis?: ScrollAxis Default: ScrollAxis.Vertical

The axis to track.

See: ScrollAxis

start

start?: ScrollElementEdge Default: ScrollElementEdge.Top

Start the animation when the element edge enters the scroll area.

See: ScrollElementEdge

end

end?: ScrollElementEdge Default: ScrollElementEdge.Bottom

End the animation when the element edge exits the scroll area.

See: ScrollElementEdge

startOffset

startOffset?: number Default: 0

The offset from the element edge where the animation should start.

endOffset

endOffset?: number Default: 0

The offset from the element edge where the animation should end.