SpringValue

The very driving force of react-spring. It's a class that can be used to create a single value that can be animated.

Usage

Basic usage, the SpringValue class you initialise can be used just like our imperative api. Meanwhile you pass the SpringValue to your animated component. Any type is valid, but only certain types are actually animated. Types that cannot be animated are basically immediate: true animations. Such types include: a boolean, a display string like "none", etc.

import { Component, createRef } from 'react'
import { SpringValue, animated } from '@react-spring/web'

class AnimatedComponent extends Component {
  isShowing = createRef(false)
  springOpacity = new SpringValue(0)

  toggle = () => {
    this.springOpacity.start(isShowing ? 0 : 1)

    this.isShowing = !this.isShowing
  }

  render() {
    return (
      <>
        <button onClick={this.toggle}>click</button>
        <animated.div style={{ opacity: this.springOpacity }}>
          I will fade
        </animated.div>
      </>
    )
  }
}

Properties

Prop	Type	Default
`animation`	`Animation`	`Animation`
`defaultProps`	`SpringConfig`	`{}`
`goal`	`any`	–
`hasAnimated`	`boolean`	`false`
`idle`	`boolean`	–
`isAnimating`	`boolean`	`false`
`isDelayed`	`boolean`	`false`
`isPaused`	`boolean`	`false`
`key`	`string \| undefined`	`undefined`
`queue`	`SpringUpdate[]`	`[]`
`velocity`	`number \| number[]`	–

Methods

Advance

Advance the current animation by a number of milliseconds.

advance(dt: number): void;

Finish

Skip to the end of the current animation.

finish(): this;

Pause

Freeze the active animation in time, as well as any updates merged before resume is called.

pause(): void;

Reset

Restart the animation.

reset(): void;

Resume

Resume the animation if paused.

resume(): void;

Set

Set the current value, while stopping the current animation.

set(value: T | FluidValue<T>): this;

Start

Update this value's animation using the queue of pending props, and unpause the current animation (if one is frozen). When arguments are passed, a new animation is created, and the queued animations are left alone.

start(): AsyncResult<this>;
start(props: SpringUpdate<T>): AsyncResult<this>;
start(to: T, props?: SpringProps<T>): AsyncResult<this>;

Stop

Stop the current animation, and cancel any delayed updates. Pass true to call onRest with cancelled: true.

stop(cancel?: boolean): this

Update

Push props into the pending queue.

update(props: SpringUpdate<T>): this;