Away transition does not work

[kasperaamodt]

🐛 Bug Report

I have installed react-spring on my website, and it works almost perfectly. The away transition does not work, it just freezes and then goes away after a second.

To Reproduce

If you go to my website, https://aamodtgroup.com/, and scroll down, and then up. you can see that there is no away animation. If you scroll down and up fast, you can see that it actually works.

Expected behavior

I expect it to behave as it does when you scroll down and up very fast, all the time.

Link to repro (highly encouraged)

https://github.com/aamodtgroup/aamodtgroup/blob/b1a15552a9f8fbf90043527805fca6154c1e9d12/packages/agtech/src/components/header/header.js#L10-L33

Environment

• react-spring v9.1.2.
• react v17.0.2

[kasperaamodt]

https://www.loom.com/share/f1dbaa3513d542f0b38b900f793fcea9

[joshuaellis]

Check the CSS that's written, because you haven't included properties like position: "fixed", top: 0, left: 0, you might find they're being removed. IMO if they're not being animated they should just be written into the element itself e.g. as a styled-component

[kasperaamodt]

Hi,

It did not work to make a new styled component, but I switched translateY for translate3d, and that worked.

So from this:

    from: { transform: "translateY(-100%)" },
    enter: { transform: "translateY(0)" },
    leave: { transform: "translateY(-100%)" },

to this:

    from: { transform: "translate3d(0,-100%,0)" },
    enter: { transform: "translate3d(0,0px,0)" },
    leave: { transform: "translate3d(0,-100%,0)" },

But for the sake of keeping the code clean, I kept the styled component with the other properties, so thanks! :)

https://github.com/aamodtgroup/aamodtgroup/blob/main/packages/agtech/src/components/header/header.js

[joshuaellis]

You could also just do the shorthands of your translation – https://react-spring.io/basics#shorthand-style-props