[Spring] Disable animation on initial render

[aamorozov]

I'm trying to disable the animation for the menu item on the initial render and only show it upon hovering the item over. Is there a way to do so with Spring component or it is only available in Transition/setting the initial prop to false ?

[jacobrask]

This would be useful, the following ugly pattern (and equivalents) is emerging in our code bases to avoid animating on first mount

const ref = useRef();
const springProps = useSpring({
  immediate: !ref.current,
});
return <div ref={ref} />

[drcmda]

if you don't give it "from" isn't that what you want? if it has nothing to go on, it doesn't animate but goes straight to "to". otherwise could i get a codesandbox to look into it?

[aamorozov]

Hi @drcmda ! Thank you for amazing tool! Here is the sandbox. I've tried your suggestion but I need to render the component based on the hover state, and it doesn't animate onMouseLeave if I don't check the state prior to rendering it. Otherwise the component will be rendered initially and animated on hover. Not a big issue in a small example but if you're loading images that you'd like to animate in based on certain events, I think it'll be better to have an option to not render them.

@jacoblearned Thank you for your suggestion, but it got me to the same point where i had to either add a hovered check prior to rendering or it wouldn't animate onMouseLeave

https://codesandbox.io/s/6nj5wwl3jz

[aamorozov]

I think i actually moved a bit away from the original issue - having only to prop fixed it, so I will open a new ticket with the description above. Thanks!