Skip to content

[bug]: springs won't work using view-transition web API #2387

@JoaoTeixeira20

Description

@JoaoTeixeira20

Which react-spring target are you using?

  • @react-spring/web
  • @react-spring/three
  • @react-spring/native
  • @react-spring/konva
  • @react-spring/zdog

What version of react-spring are you using?

10.0.1

What's Wrong?

More details on the setup:

next.js: 15.3.4
react: 19.1.0
next-view-transitions: 0.3.4

NOTE: mentioning that i downgraded react and react-spring to ^18 and ^9 respectively in order to check compability issues but they have the same behaviour

Seems any component rendered when a view-transition starts, makes the animation freeze when it's supposed to play, this is a very tricky setup since there are multiple libraries used to reproduce this error, but under the hood, I think this is related to the native startViewTransition call.

Wrapping the router call under a useTransition react hook to track the loading and render the component containing the animation freezes.

Also, seems any spring playing in a loop, the moment the transition starts, the animation freezes.

I don't know if this is a silly mistake i'm making for not properly use requestAnimationFrame or flushSync from react

To Reproduce

you can test this repo:
https://github.com/JoaoTeixeira20/next-transitions-demo/tree/with-react-spring-in-transition

Also a demo with this occuring:
https://streamable.com/xsruew

Expected Behaviour

Any animation should start/not stop during a view-transition API call

Link to repo

https://github.com/JoaoTeixeira20/next-transitions-demo/tree/with-react-spring-in-transition

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions