Skip to content

useSpring does not orchestrate animations if one is using config w/o duration, when others do #1584

@ShiiRochi

Description

@ShiiRochi

🐛 Bug Report

I am trying to chain two animations so they should work in sequence, however, they're happening at the same time. The first animation is using animation configuration, while another - only duration.

To Reproduce

Steps to reproduce the behavior:

  1. create some UI stuff...for example expanding box and elements appearing inside
  2. create useSpring
  3. create useTransition
  4. use config.stiff or any other in useSpring
  5. use duration in config for useTransition
  6. make refs for both animations
  7. chain animations like so: isVisible ? [springRef, transitionRef] : [transitionRef, springRef]

Expected behavior

useChain successfully orchestrates useSpring and useTransition and knows how to handle animations with different configurations, i.e. when useSpring ens, useTransition starts and vice versa.

Link to repro (highly encouraged)

CodeSandbox demo.

Here bug is visible when toggling reverse animation...when a box is hiding its content.

Environment

  • react-spring v9.2.3
  • react v17.0.1

Metadata

Metadata

Assignees

Labels

kind: bugSomething isn't workingreleasedThis has been released on stablereleased in betathis has been released on a beta

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions