containerFriction

Specifies the friction applied to the dragged element when going out of bounds, where 0 means no friction at all and 1 prevents the element from going past the container bounds.

Accepts

A Number greater than or equal to 0 and lower than or equal to 1
A Function that returns a Number greater than or equal to 0 and lower than or equal to 1

When defined using a Function, the value will be automatically refreshed every time the container or target element is resized.
It can also be refreshed manually using the refresh() method.

Default

0.8

containerFriction code example

import { createDraggable } from 'animejs';

createDraggable('.square', {
  container: '.grid',
  containerFriction: 0,
});

createDraggable('.circle', {
  container: '.grid',
  containerFriction: 1,
});

<div class="large centered grid square-grid">
  <div class="square draggable"></div>
  <div class="circle draggable"></div>
</div>

Previous Next

containerPadding
releaseContainerFriction