media queries in props

[j-waaang]

I want to have different animations on mobile and desktop. It's possible to get it to work with a media query hook but that won't work on a project with server-side-rendering. So I am looking for a solution to use media-queries inside the spring props. Anyone can help me?

Sol 1 (works but not good for SSR)

const isDesktop = useDesktop() // won't work for SSR

const style = useSpring({
    to: {
      transform: `translate(0px, ${isDesktop ? 50 : 30} px)`,
    },
  })

Sol 2 (would be nice to get something like this to work)

    to: {
      transform: `translate(0px, 30px)`,
      ["@media screen and (min-width: 768px)"]: {
        transform: `translate(0px, 50px)`,
      },
    },
  })

[DamianPereira]

Maybe this can be solved with css custom properties. I have not tried it, but maybe something like this:

js code:

const style = useSpring({
    to: {
      transform: `translate(0px, var(--animation-vertical-offset))`,
    },
  })

styles

:root {
  --animation-vertical-offset: 30px;
}
@media screen and (min-width: 768px) {
  :root {
    --animation-vertical-offset: 50px;
  }
}

[DamianPereira]

Just tried it and it works, css custom properties can be used inside react spring keyframes.

[j-waaang]

Just tried it. What happens when you use css custom properties is that react-spring won't do the animation anymore. Instead it jumps right to the set value.

[DamianPereira]

Maybe something else is wrong, can you share a codesandbox?