Controller

Manages SpringValues for our spring hooks.

Usage

Basic usage, the Controller class you initialise can be used as an imperative api to control your SpringValues. Meanwhile you pass Controller.springs to your animated component.

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

class AnimatedComponent extends Component {
  isShowing = createRef(false)
  animations = new Controller({ opacity: 0 })

  toggle = () => {
    this.animations.start({ opacity: this.isShowing ? 1 : 0 })

    this.isShowing = !this.isShowing
  }

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

Constructor Arguments

Below is the arguments that can passed to the constructor of the Controller class.

const ControllerProps = {
  ref,
  from,
  loop,
  onStart,
  onRest,
  onChange,
  onPause,
  onResume,
  onProps,
  onResolve,
}

Properties

Methods

Get

Gets the current values of our springs.

get(): State & UnknownProps;

Set

Set the current values without animating.

set(values: Partial<State>): void;

Update

Push an update onto the queue of each value.

update(props: ControllerUpdate<State> | Falsy): this;

Start

Start the queued animations for every spring, and resolve the returned promise once all queued animations have finished or been cancelled. 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.

start(props?: OneOrMore<ControllerUpdate<State>> | null): AsyncResult<this>;

Stop

Stop all queued animations for every spring at the same time, or alternatively provide a selection of keys that should be stopped.

stop(): this;
stop(keys: OneOrMore<string>): this;
stop(cancel: boolean): this;
stop(cancel: boolean, keys: OneOrMore<string>): this;
stop(keys?: OneOrMore<string>): this;
stop(cancel: boolean, keys?: OneOrMore<string>): this;

Pause

Freeze the active animation in time.

pause(keys?: OneOrMore<string>): this;

Resume

Resume the animation if paused.

resume(keys?: OneOrMore<string>): this;

Each

Call a function once per spring value.

each(iterator: (spring: SpringValue, key: string) => void): void