Interface Inertia

An animation that decelerates a value based on its initial velocity, usually used to implement inertial scrolling.

Optionally, min and max boundaries can be defined, and inertia will snap to these with a spring animation.

This animation will automatically precalculate a target value, which can be modified with the modifyTarget property.

This allows you to add snap-to-grid or similar functionality.

Inertia is also the animation used for dragTransition, and can be configured via that prop.

interface Inertia {
    bounceDamping?: number;
    bounceStiffness?: number;
    from?: string | number;
    max?: number;
    min?: number;
    power?: number;
    restDelta?: number;
    timeConstant?: number;
    type: "inertia";
    velocity?: number;
    modifyTarget?(v): number;
}

Properties

bounceDamping? bounceStiffness? from? max? min? power? restDelta? timeConstant? type velocity?

Methods

modifyTarget?

Properties

Optional bounceDamping

bounceDamping?: number

If min or max is set, this affects the damping of the bounce spring. If set to 0, spring will oscillate indefinitely. Set to 10 by default.

<motion.div
  drag
  dragTransition={{
    min: 0,
    max: 100,
    bounceDamping: 8
  }}
/>

Optional bounceStiffness

bounceStiffness?: number

If min or max is set, this affects the stiffness of the bounce spring. Higher values will create more sudden movement. Set to 500 by default.

<motion.div
  drag
  dragTransition={{
    min: 0,
    max: 100,
    bounceStiffness: 100
  }}
/>

Optional from

from?: string | number

The value to animate from. By default, this is the current state of the animating value.

<Frame
  drag
  dragTransition={{ from: 50 }}
/>

Optional max

max?: number

Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value).

<motion.div
  drag
  dragTransition={{ min: 0, max: 100 }}
/>

Optional min

min?: number

Minimum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as less than this value).

<motion.div
  drag
  dragTransition={{ min: 0, max: 100 }}
/>

Optional power

power?: number

A higher power value equals a further target. Set to 0.8 by default.

<motion.div
  drag
  dragTransition={{ power: 0.2 }}
/>

Optional restDelta

restDelta?: number

End the animation if the distance to the animation target is below this value, and the absolute speed is below restSpeed. When the animation ends, the value gets snapped to the animation target. Set to 0.01 by default. Generally the default values provide smooth animation endings, only in rare cases should you need to customize these.

<motion.div
  drag
  dragTransition={{ restDelta: 10 }}
/>

Optional timeConstant

timeConstant?: number

Adjusting the time constant will change the duration of the deceleration, thereby affecting its feel. Set to 700 by default.

<motion.div
  drag
  dragTransition={{ timeConstant: 200 }}
/>

type

type: "inertia"

Set type to animate using the inertia animation. Set to "tween" by default. This can be used for natural deceleration, like momentum scrolling.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: "inertia", velocity: 50 }}
/>

Optional velocity

velocity?: number

The initial velocity of the animation. By default this is the current velocity of the component.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: 'inertia', velocity: 200 }}
/>

Methods

Optional modifyTarget

  • modifyTarget(v): number

  • A function that receives the automatically-calculated target and returns a new one. Useful for snapping the target to a grid.

    <motion.div
      drag
      dragTransition={{
        power: 0,
        // Snap calculated target to nearest 50 pixels
        modifyTarget: target => Math.round(target / 50) * 50
      }}
    />

    Parameters

    • v: number

    Returns number

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc