Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug]: Flimmering video (with SSR?) #2305

Open
1 of 5 tasks
Wallman opened this issue Jul 18, 2024 · 2 comments
Open
1 of 5 tasks

[bug]: Flimmering video (with SSR?) #2305

Wallman opened this issue Jul 18, 2024 · 2 comments
Labels
template: bug This issue might be a bug

Comments

@Wallman
Copy link

Wallman commented Jul 18, 2024

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?

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

@Wallman Wallman added the template: bug This issue might be a bug label Jul 18, 2024
@dmaslan
Copy link

dmaslan commented Aug 16, 2024

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

@dmaslan
Copy link

dmaslan commented Aug 16, 2024

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:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
template: bug This issue might be a bug
Projects
None yet
Development

No branches or pull requests

2 participants