element. The element has the style specified on :spring-style prop. Spring animation will be triggered when the value of :spring-style prop is changed.

Bounce and Duration

bounce and duration options are used to specify the bounciness and perceptive duration of an animation.

bounce

Bounciness of an animation. The value is between -1 and 1. The default value is 0.

duration

Perceptive duration (ms) of an animation. The default value is 1000.

disabled vs. relocating

component and useSpring composable have disabled and relocating options. They both stop ongoing animation and the component/composable will not trigger animations for further style changes.

You should use disabled when you want to disable a spring animation but keep rendering an element move by continuously updating the style value, then trigger a spring animation again with using velocity of the style value updates. You can see the example of it in Swipe demo. disabled is true while you drag an element and trigger spring animation with the inherited velocity of the dragging when releasing it.

relocating is used in case of updating the style value without triggering a spring animation and you will immediately trigger an animation with using the inherited velocity of the previous animation. In Picker demo, you can rotate the picker by mouse wheel endlessly. To do that, it rewinds the picker to the opposite side of the rotation with relocating = true while keeping the rotation animation.

Spring Style Caveats

All numbers in a style value must have the same unit and must be appeared in the same order. For example, the following :spring-style value is invalid and will not work as expected:

`vue

`

This is because the library parses the numbers in the style value, then calculate the animation for each number in the style value. The library cannot understand the meaning of translate, scale nor predict the difference between 100% and 100px. To fix the above example, you need to specify both translate and scale in the same order and always use the same unit:

`vue

`

How It Works

The library sets spring animation expression in an animating CSS value including a custom property that representing elapsed time (let's say --t here). Then register --t by using CSS.registerProperty to be able to apply CSS Transition on it. The pseudo code of the spring animation expression looks like below:

`js
// Register --t
CSS.registerProperty({
name: '--t',
syntax: '',
inherits: false,
initialValue: 0,
})

// Set initial state
el.style.setProperty('--t', 0)

// Set spring animatioin expression including --t
el.style.translate = 'calc(P (A var(--t) + B) exp(-C var(--t)) - Q)'

// Re-render
requestAnimationFrame(() => {
// Trigger animation
el.style.setProperty('--t', 1)
el.style.transition = '--t 1000ms linear'
})
`

The library also provides a graceful degradation for browsers that do not support CSS.registerProperty and exp() function of CSS. In this case, the library will use requestAnimationFrame to animate the style value instead of CSS Transition.

API Reference

$3

It renders a native HTML element as same tag name as the property name (e.g. renders