Skip to content

API Reference / @gtkx/animated / AnimationConfig

Interface: AnimationConfig

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:99

Properties

bounce?

optional bounce?: number

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:203

When above zero, the spring will bounce instead of overshooting when exceeding its goal value. Its velocity is multiplied by -1 + bounce whenever its current value equals or exceeds its goal. For example, setting bounce to 0.5 chops the velocity in half on each bounce, in addition to any friction.


clamp

clamp: boolean

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:195

Avoid overshooting by ending abruptly at the goal value.

Default

ts
false

damping

damping: number

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:136

The damping ratio, which dictates how the spring slows down.

Set to 0 to never slow down. Set to 1 to slow down without bouncing. Between 0 and 1 is for you to explore.

Only works when frequency is defined.

Default

ts
1

decay?

optional decay?: number | boolean

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:224

"Decay animations" decelerate from an initial velocity. They do not ease toward a to value — to is ignored by the decay integration.

Requires a non-zero config.velocity (otherwise the animation produces no movement). Typically paired with gesture libraries that supply velocity, e.g. @use-gesture/react's useDrag:

ts
api.start({ pos, config: { velocity: [vx, vy], decay: true } })

Use true for the default exponential decay factor (0.998).

When a number between 0 and 1 is given, a lower number makes the animation slow down faster. Setting to 1 would make an unending animation.

Default

ts
false

duration?

optional duration?: number

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:183

Animation length in number of milliseconds.


easing

easing: EasingFunction

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:189

The animation curve. Only used when duration is defined.

Defaults to quadratic ease-in-out.


frequency?

optional frequency?: number

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:125

The natural frequency (in seconds), which dictates the number of bounces per second when no damping exists.

When defined, tension is derived from this, and friction is derived from tension and damping.


friction

friction: number

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:117

The damping ratio coefficient, or just the damping ratio when speed is defined.

When speed is defined, this value should be between 0 and 1.

Higher friction means the spring will slow down faster.

Default

ts
26

mass

mass: number

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:144

Higher mass means more friction is required to slow down.

Defaults to 1, which works fine most of the time.

Default

ts
1

precision?

optional precision?: number

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:166

The smallest distance from a value before that distance is essentially zero.

This helps in deciding when a spring is "at rest". The spring must be within this distance from its final value, and its velocity must be lower than this value too (unless restVelocity is defined).

Default

ts
0.01

progress?

optional progress?: number

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:179

For duration animations only. Note: The duration is not affected by this property.

Defaults to 0, which means "start from the beginning".

Setting to 1+ makes an immediate animation.

Setting to 0.5 means "start from the middle of the easing function".

Any number >= 0 and <= 1 makes sense here.


restVelocity?

optional restVelocity?: number

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:156

The smallest velocity before the animation is considered "not moving".

When undefined, precision is used instead.


round?

optional round?: number

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:230

While animating, round to the nearest multiple of this number. The from and to values are never rounded, as well as any value passed to the set method of an animated value.


tension

tension: number

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:107

With higher tension, the spring will resist bouncing and try harder to stop at its end value.

When tension is zero, no animation occurs.

Default

ts
170

velocity

velocity: number | number[]

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:150

The initial velocity of one or more values.

Default

ts
0

Released under the MPL-2.0 License.