Fixed position element under animated.div causes position to be relative animated.div instead of window.

[branlok]

As the title specified, these are the useSpring props I've passed:

 const styles = useSpring({
    config: config.gentle,
    from: { transform: " scale(0.95)", opacity: 0 },
    to: {
      opacity: appear ? 1 : 0,
      transform: "scale(1)",
    },
  });

I notice this issue is only present with transform, once that is removed the issue is gone. but of course that defeats the propose of my animation.

an additional thing I've also noticed is that when I pass <div style={styles}> instead of animated.div, the issue also disappears. So I am wondering is it acceptable here to keep div here in this scenario, or are we suppose to use animated at all times?

[branlok]

Ok i think I've whip up a quick solution for myself. added a state change onRest to convert end style transform: none. Although I thought it would rerun the animation again from scale(0.95) -> to transform: "none" - which I don't see here.

  const styles = useSpring({
    config: config.gentle,
    from: { transform: "scale(0.95)", opacity: 0 },
    to: {
      opacity: appear ? 1 : 0,
      transform: endTransform ? "none" : "scale(1)",
    },
    onRest: {
      transform: () => setEndTransform(true)
    }
    
  });

[joshuaellis]

Do you have a codesandbox we could look at?

[branlok]

https://codesandbox.io/s/tailwind-css-and-react-forked-2oxn0?file=/src/App.js

yes, I replicated the problem here, I think it might have to do with some conflict between tailwindcss and react-spring.
Since I tried it again with plain css, but the issue didnt occur.

[joshuaellis]

You can use the scale as a shorthand prop – https://codesandbox.io/s/tailwind-css-and-react-forked-w3ozb?file=/src/App.js

Does this solve your issue?

[branlok]

yes, this works great. Didn't realize there were shorthand props. Thank you!