useSpring

The spring behaves similarly like tween which interpolates values smoothly however now the controls using physics-based calculations, creating natural, fluid animations within your application.

Demo

Usage

const nextValue = useRef(100)
const currentValue = useSpring(100)

const onUpdateValue = async () => {
  nextValue.current = nextValue.current === 100 ? 350 : 100

  await currentValue.set(nextValue.current, {
    damping: 0.8,
    stiffness: 0.15,
    precision: 0.01,
  })
}

const onCancel = async () => {
  await currentValue.set(nextValue.current, {
    hard: true,
  })
}

Type Declaration

const const currentValue: SpringSignal<number>currentValue = useSpring<number>(initial: number, options?: Partial<SpringOpts>, displayName?: string): SpringSignal<number>useSpring(0)

interface SpringUpdateOpts {
  SpringUpdateOpts.hard?: anyhard?: any
  SpringUpdateOpts.soft?: string | number | boolean | undefinedsoft?: string | number | boolean
}

interface SpringOpts extends SpringUpdateOpts {
  SpringOpts.stiffness: numberstiffness: number
  SpringOpts.damping: numberdamping: number
  SpringOpts.precision: numberprecision: number
}