root
Defines a root element limiting all DOM queries within that Scope to descendants of the specified HTMLElement. This is particularly useful for creating self-contained animation environments in component-based architectures like React applications.
Accepts
root code example
import { createScope, animate } from 'animejs';
createScope({ root: '.row:nth-child(2)' })
.add(() => {
animate('.square', {
x: '17rem',
loop: true,
alternate: true
});
});<div class="medium row">
<div class="square"></div>
<div class="padded label">outside scope</div>
</div>
<div class="medium row">
<div class="square"></div>
<div class="padded label">inside scope</div>
</div>
<div class="medium row">
<div class="square"></div>
<div class="padded label">outside scope</div>
</div>