Controller

The Controller is react-spring's heart. All primitives use it internally (including hooks). If you dislike render-props, and maybe hooks are too radical for you, then perhaps this is what you are looking for as it gives you full manual control without having to worry about loose-end animation handles. The api is very similar to the useSpring hook.

import { Controller, animated } from 'react-spring'

class Test extends React.Component {
  state = { show: true }
  animations = new Controller({ opacity: 0 })

  toggle = () => this.setState((state) => ({ show: !state.show }))

  render() {
    const props = this.animations.update({ opacity: this.state.show ? 1 : 0 })
    return (
      <>
        <button onClick={this.toggle}>click</button>
        <animated.div style={props}>I will fade</animated.div>
      </>
    )
  }
}

Call a function once per spring value.

controller.each((spring, key) => (key === 'opacity' ? spring.set(1) : spring.set(0)))

Get the current values of our springs.

const springValues = controller.get()

Freeze the active animation in time.

contoller.pause()

Freezes some of the spring animations in time.

contoller.pause(['opacity', 'color'])

Resumes the active animation.

contoller.resume()

Resumes some of the paused spring animations.

contoller.resume(['opacity', 'color'])

Set the current values without animating.

contoller.set({ opacity: 1, color: 0x0000ff })

Start the queued animations for every spring, and resolve the returned promise once all queued animations have finished or been cancelled.

controller.start()

When you pass a queue (instead of nothing), that queue is used instead of the queued animations added with the update method, which are left alone.

controller.start({ opacity: 1, color: 0x0000ff })

Stop all animations.

contoller.stop()

Stop animations for the given keys.

contoller.stop(['opacity', 'color'])

Cancel animations for the given keys.

contoller.stop(true, ['opacity', 'color'])

Push an update onto the queue of each value.

contoller.update({ opacity: 1, color: 0x0000ff })

Returns true when both:

• the current phase is anything but ACTIVE
• no async to prop is active

Put simply, it's true when not animating.

Returns the item the Controller is associated with. You probably don't need to use this much.

This is used only in the useTransition hook & Transition render-props component.

Sets the item the Controller is associated with. You probably don't need to use this much.

This is used only in the useTransition hook & Transition render-props component.

The queue of pending updates.

Call .start() to flush the queue.

The injected ref. When defined, render-based updates are pushed onto the queue instead of being auto-started.

The animated values