Feature Request: react-spring support for v8

[littlehaker]

Description

The v8 version of @pixi/react has some breaking changes. It seems that @pixi/react-animated is no longer suitable for this version.

Are there any examples of react-spring being used for v8 version?

Or how can I use the animated function from react-spring to lift @pixi/react components?

[thejustinwalsh]

The approach used in react-spring/three should be able to be used in @pixi/react v8

Dependencies:

• React 19 support pmndrs/react-spring#2341
• export { applyProps } from './helpers/applyProps'; from index.ts
• add r3f style addEffect to globally hook the application tick, or leave updating raf to user

Or how can I use the animated function from react-spring to lift @pixi/react components?

Using react-spring/three as a guide, you should be able to use applyProps and gather the primitives from the pixi.js exports to build an animated HOC.

[juniorbatistadev]

So there's no plan to update @pixi/react-animated to work with v8?

[trezy]

@juniorbatistadev There are no plans yet because, as @thejustinwalsh mentioned, React Spring doesn't yet work with React 19. Once there's a React 19 compatible release of React Spring, we'll absolutely look into supporting it.

That said, there are other animation libraries (i.e. Motion One) which may also be worth supporting. We likely won't get deep into any of these until @pixi/react@v8 gets a full release.

[juniorbatistadev]

Motion support would be a dream come true.

[RJWadley]

Now that @pixi/react@v8 has been published, I took a few hours and put together some basic motion support for it. You can find it on github or npm. Currently it supports the animate and initial props, with whatever transitions you want.

If you already use motion in the rest of your app it's pretty small - around 1 kb gzipped at the moment.

[trezy]

@RJWadley this is awesome! Would you be interested in incorporating this directly into Pixi React?

[RJWadley]

@trezy I would love that if yall're interested!

[trezy]

@RJWadley Yessir! Poke me on Discord and we can discuss further. 🥰