onStep callback for Motion

I’m curious how maintainers would feel about adding a callback for each step (more or less calling an optional callback each time the render function of Motion is run). We use Motion at my work and have found ourselves in a situation where onStep (or something like that) would be really helpful.

Please let me know if this is something we’re open to. I’d be happy to do the work myself. If it’s a no go, I’m happy to fork.

Cheers!

[danhaggard]

@nkbt Just to add to @berrtech 's question. Do you have a preferred strategy for dealing with cases where the UI state gets out of sync with <Motion> between renders? It would be nice to be able to set the starting value of the animation on any desired render after a component is mounted.

Is the defaultStyle prop intended to handle cases like this? Because in my case where new scroll events are triggered by user input - setting defaultStyle to the current scroll position of the element doesn’t help because Motion ignores it as mentioned in the docs.

My current non-ideal work-around is to force an extra render of Motion before the animation to ensure Motion’s starting point is in sync with the UI.

componentWillReceiveProps(nextProps) {
  if (this.props.toggleScroll !== nextProps.toggleScroll) {
    this.setState({
      motionStyle: {y: this.elem.scrollTop},
      prevRenderType: 'uiSync',
    });
  }
}

So - it sees that an auto-scroll event has been triggered - and calls setState to set the value of motionStyle to the current scrollTop value of the element. No animation happens because it’s not using a spring.

But now that Motion has the new starting point - we still need to trigger the animation somehow. But I’ve used up the props change caused by the user click - so there is nothing to trigger the next render. So the only thing I’ve been able to come up with is to use the following:

componentDidUpdate() {
  if (this.state.prevRenderType === 'uiSync') {
    this.setState({
      motionStyle: {y: spring(this.props.offsetTop, this.state.springConfig)},
      prevRenderType: 'autoScroll',
    });
  }
}

So - after the render to sync the UI with Motion - calling setState in componentDidUpdate with the desired spring triggers another render which does the animation. Using the prevRenderType flag prevents an infinite regress.

This works - but setting state in componentDidUpdate is generally frowned upon. Plus it uses up an extra render.

Would be keen to hear if anyone has come up with another solution.

[nkbt]

This is what we do in one place to do smooth scrolling of a component

  onScroll(val) {
    this.scrollContainer.scrollLeft = val;
    return null;
  },

<Motion
  onRest={this.onRest}
  defaultStyle={{val: this.scrollContainer.scrollLeft}}
  style={{val: spring(animateTo)}}>
  {this.onScroll}
</Motion>