Interactive example
Scope
constructor function + defaults
Uses scope construction with conditional behavior based on container width.
// Similar to vanilla JS pattern:
createScope({
mediaQueries: { isSmall: '(max-width: 200px)' },
defaults: { ease: 'linear', duration: 2000 },
})
.add((self) => {
const { isSmall } = self.matches;
if (isSmall) {
// Small viewport: Animate only
animate(element, { rotate: 360, loop: true });
} else {
// Large viewport: Create draggable
createDraggable(element, { container: root });
}
// Cleanup on scope revert
return () => {
element.classList.remove('draggable');
};
});basic scope
Create a scoped animation context with automatic cleanup. Only elements within the scope root are animated.
root parameter
CSS selectors are scoped to the root element. Elements outside the scope are not affected.
.scoped-box is used in both containers, but only elements inside the scope root are animated.shared defaults
Use scope defaults to share animation parameters like easing and duration across all animations.
Scope
Using useAnimeScope and useAnime hooks together. The animation automatically adapts when the container crosses 200px.
registered methods
Register methods within the scope that can be called externally via scope.methods
addOnce method (Component)
Using AnimeScope component - register a constructor that runs only once via animateOnce prop, even when media queries change.
animate increments but animateOnce stays at 1.keepTime method (Component)
Using AnimeScope component with ref to call keepTime() - preserve animation progress when refreshing the scope.
keepTime(), animation continues from current position after refresh.refresh method (Component)
Using AnimeScope component with ref to call refresh() - re-run all constructors to pick up DOM changes.
batch revert
Use revert() to clean up all animations in the scope at once. Cleanup functions are also called.
scope properties (Component)
Access scope properties via ref: root, matches, and methods. These provide context about the scope state.