Disable initial transition

[ignatevdev]

Hi. I'm new to react-spring, but have a background in react-motion. My main goal while using this library was to make the code simpler and more readable, which I believe was one of the goals of this library in comparison with react-motion.

However, while migration from TransitionMotion to Transition, I've faced a problem, where I couldn't disable the animation for the first mount. In react-motion willEnter applies only to the new elements, not the initial ones, which makes me able to render the children for the first time without the animation.

However, when I try to move to react-spring's Transition, it applies from styles to the first children and animates the as if they have just entered.

This probably would be okay if it wouldn't produce performance issues. E.g. when I navigate to the page with my Components with transition, animation freezes for a moment, even when using native and animated.

So my question is - is it possible to disable the initial animation for components rendered via Transition, so that it only animates the entering/leaving nodes after the first mount.

[drcmda]

For now this would work:

ref={r => this.transition = r}
immediate={!this.transition}

I’ll add a flag or something to make this easier, any ideas?

Btw, does this mean react-motion can’t animate initial elements? Would be nice to allow both without too much hassle.

[drcmda]

As of 5.7.0 you have an additional prop initial which you can use to override from on first mount. If you do <Transition initial={null} ... > you effectively remove first-mount base styles, so it jumps to "enter" immediately. You can also use it to apply animated first mount styles in general.

I'm in the process of documenting it all, here's a temporary version listing all the current props: http://steady-impulse.surge.sh/transition

You can already try it in the live playground there, add initial={null} and it won't animate.

[ignatevdev]

Great news!

I'll try this out soon and report if I meet any issues.
Thanks for the quick reply!