React-motion: Conditional Animation

[kujon]

Hello,

I'm using https://github.com/uber/react-map-gl, which in short is a fully stateless map component. On each scroll, drag, etc, it will flood you with calls to the callback indicating viewport change and you have to handle map updates yourself. That works super nicely and super smoothly. However, I sometimes need an external component to provide the map with, let's say a new centre point, and I would like to transition to it nicely (I can determine when to do it based on checks in componentWillReceiveProps and I can determine when to disable this functionality, by using onRest.

Is there a way of conditionally disabling an animation? (see below for a crap solution describing what I'm after):

const {viewport} = this.props;

const renderMap = viewport => <Map {...viewport} />;

if (shouldAnimate) {
  return <Motion style={createMotion(viewport)}>{renderMap}</Motion>
} else {
  return renderMap(viewport); 
}

The problem with the above is that Map gets recreated whenever I enable/disable animation.

[sompylasar]

Try always rendering (returning) the map wrapped with Motion, but when no
animation required, pass your viewport styles directly to Motion, without
the spring configs that are likely created in "createMotion". This way
Motion will skip animating and will render the final values immediately.
Hope this helps.

[nkbt]

I usually do something like:

import {spring, Motion} from 'react-motion`;

// somewhere in component
maybeSpring() {
  return this.state.shouldAnimate ? spring : (x => x);
}

render() {
  return <Motion style={{top: this.maybeSpring(100)}}>
  // ....
}

[kujon]

That is one brilliant solution, thx!