Add constructor function
A constructor function is called inside the Scope's context immediately after being passed as a callback of the Scope's add() method.
The Scope registers and keeps track of all animations, timers, timelines, animatables, draggables, onScrolls, and even other scopes declared inside the constructor function.
scope.add(constructorFunction);Constructor function argument
| Name | Type |
|---|---|
| self | The current Scope instance |
Returns (optional)
A cleanup Function called when the Scope is reverted or when a media query changes.
Add constructor function code example
import { utils, animate, createScope, createDraggable } from 'animejs';
createScope({
mediaQueries: { isSmall: '(max-width: 200px)' },
defaults: { ease: 'linear' },
})
.add(self => {
/* Media queries state are accessible on the matches property */
const { isSmall } = self.matches;
/* The $() utility method is also scoped */
const [ $square ] = utils.$('.square');
if (self.matches.isSmall) {
/* Only animate the square when the iframe is small */
animate($square, {
rotate: 360,
loop: true,
});
} else {
/* Only create the draggable when the iframe is large enough */
$square.classList.add('draggable');
createDraggable($square, {
container: document.body,
});
}
return () => {
/* Removes the class 'draggable' when the scope reverts itself */
$square.classList.remove('draggable');
}
});<div class="iframe-content resizable">
<div class="large centered row">
<div class="col">
<div class="square"></div>
</div>
</div>
</div>