Scope

The Scope API lets you create responsive animations that react to media queries, keeping animations clean and isolated within a root element.

createScope()

import { createScope, animate, createTimeline } from 'animejs';

createScope({
  root: '#app',
  mediaQueries: {
    portrait: '(orientation: portrait)',
    large: '(min-width: 1024px)',
  }
}).add(({ matches }) => {
  const isPortrait = matches.portrait;
  animate('.hero', {
    x: isPortrait ? 0 : [-50, 0],
    y: isPortrait ? [-30, 0] : 0,
    duration: 800,
    loop: true,
  });
});

Key Features

• Automatically re-runs when a media query condition changes
• Cleans up all animations when the scope is destroyed
• Scopes selectors to a root element for isolation
• Works with animate(), createTimeline(), createDraggable() and more

Options

Methods

• .add(callback) — Register animations that run (and re-run on query change)
• .revert() — Destroy the scope and clean up all animations
• .refresh() — Manually re-run all added callbacks