scrollInView()
Animate the scroll position of the container if the draggable position is outside of the scroll threshold.
Parameters
| Name | Type | Description |
|---|---|---|
| duration(opt) | Number |
The duration of the animation (default 350) |
| gap(opt) | Boolean |
How much extra distance from the edges of the container the draggable should be animated to |
| ease(opt) | ease |
The easing function applied to the animation (default InOutQuad |
Returns
The draggable itself
scrollInView() code example
import { createDraggable } from 'animejs';
const [ $scrollInView ] = utils.$('.scroll-button');
const draggable = createDraggable('.square', {
container: '.scroll-container',
});
const scrollInView = () => {
draggable.scrollInView(400, 100);
}
// Set the draggable position outside the scroll viewport
draggable.x = 120;
draggable.y = 200;
$scrollInView.addEventListener('click', scrollInView);<div class="scroll-container scroll-x scroll-y">
<div class="scroll-content">
<div class="large padded grid square-grid">
<div class="square draggable"></div>
</div>
</div>
</div>
<fieldset class="absolute controls">
<button class="button scroll-button">Scroll in view</button>
</fieldset>