pmndrs
[bug]: Flimmering video (with SSR?)
Which react-spring target are you using?
- [X]
@react-spring/web - [ ]
@react-spring/three - [ ]
@react-spring/native - [ ]
@react-spring/konva - [ ]
@react-spring/zdog
What version of react-spring are you using?
9.7.3
What's Wrong?
When using NextJS and SSR, animations including videos flicker and does not look good. See codesandbox.
To Reproduce
Setup a NextJS/SSR project and try to animate videos.
Expected Behaviour
No flickering, seems to work good on client side rendered stuff.
Link to repo
https://codesandbox.io/p/devbox/react-spring-ssr-video-bug-y3kq5m
I am also experiencing this issue on a Next JS project. The component seems to re-render after the transition is complete, causing a flicker. It happens on this example from the docs as well, although there is no video so you don't see a flicker
I was able to solve the issue by passing an array to the useTransition hook instead of an index. This is how it is described in the docs, although most of the examples (including the one above) use an index. Perhaps that is left over from a previous version. See an updated version of your repo, without a flicker: