Scroll Observer

Synchronize animations with the scroll position or trigger them when elements enter/leave the viewport using the Scroll Observer API.

onScroll()

Pass onScroll() as the autoplay parameter to synchronize an animation with scroll:

import { animate, onScroll, createDrawable, stagger } from 'animejs';

animate(createDrawable('path'), {
  draw: ['0 0', '0 1', '1 1'],
  delay: stagger(40),
  ease: 'inOut(3)',
  autoplay: onScroll({ sync: true }),
});

Trigger Mode

Trigger an animation once when an element enters the viewport:

animate('.fade-in', {
  opacity: [0, 1],
  translateY: [30, 0],
  duration: 600,
  autoplay: onScroll({
    target: '.fade-in',
    enter: 'bottom top',  // element bottom hits viewport top
    leave: 'top bottom',  // element top leaves viewport bottom
    once: true,
  }),
});

Options