React-motion: Tell when animation is finished

[nkbt]

Sort of related to #100

It is OK now to check current value if you are using default spring preset. But if I am using something like wobbly and animate height, I can easily get zero height while animation is far from being finished (then it goes to negative height, but that is a different story).

So if I think that my animation is done when height equals 0 and want to unmount element, that is not actually true and on next RAF component is shown again but with a very little height. And again and again.

I am pretty sure we had this discussion somewhere else, but could not find a separate issue for this.

I would like to see API in this way:

<Motion>
  {(style, {isFinished}) => console.log(isFinished)}
</Motion>

Passing another object to render function will not break current API, and will potentially allow us to pass more fields, not only isFinished but exposing some RM internal state (maybe related to #219)

[bsansouci]

What's the advantage of this over adding a prop onEnd which would call a callback? I'm a little scared of this isFinished inside the render function because it sounds like you'll have to mutate some state in the parent component to register that the animation is done. Ultimately you want the parent to know that the animation is done, not necessarily the children.

[nkbt]

Callback would work for some cases, but in my case having isFinished passed to render itself would work better, since I do not want to manipulate state, based on callbacks and I want only change what is rendered inside function without re-rendering whole component. I thing both should be added. Though this one probably should not be added to the main README (and added to a separate Advanced usage WIKI page)

[chenglou]

end callback and isFinished here would need to be per number btw, not per style

[sompylasar]

@chenglou @nkbt The #219 velocities are a better way to go than a single isFinished flag. There could be a helper to which you pass the object with velocities so it calculates whether all / any / some of them have reached certain threshold.

[nkbt]

@sompylasar I mentioned that issue in my first message =).
That could be an additional thing passed to render callback alongside with isFinished flag, which is simple and straightforward and does not require any extra logic around it.

[sompylasar]

@nkbt, yes, I saw this. Just missed the "alongside" thing, sorry.

[yanivtal]

Is anyone working on this? We also need an end callback for our use case.

[bsansouci]

@chenglou I don't think anyone's working on it as of right now. PRs are very welcome though :D

[chenglou]

I will be working on this.

[nkbt]

I though I will, but had a pretty crazy last month

[yanivtal]

Sweet thanks Cheng! We're using this in several projects. Absolutely love it!

[clayne11]

+1 - this would be super helpful. I use this library for animations such as animating in a modal from the bottom of the screen, and I want to animate it out then unmount it when the animation is finished, and I currently don't have any way to do that.

[dozoisch]

That would be really useful! Particularly for route transition (eg: poping modal/changingfield focus when the animation finished!)

[ReDrUm]

:+1: Adding an 'on animation complete' callback prop would be very useful.

[appsforartists]

Does it simplify anything to call it onRest instead of onEnd/Finished? You don't know if it will ever animate again, just that it isn't currently moving.

I realize this is bikeshedding, but I wonder if it will avoid future confusion or edge cases to present it as a temporary stop (not necc. a permanent one).

[appsforartists]

@chenglou you asked for an example of when somebody might want to use this. Take a look at this API proposal.

There are many times that I find myself wanting to have an object spring to a user's touch, but then track it perfectly once it gets there. In a world without an onRest callback, this is much more cumbersome than it should be.

[appsforartists]

@threepointone, @chenglou, and I just chatted about this for a bit.

While we see the potential usefulness of a per-value onRest (e.g. in springParams), the simple/common case is per Motion instance (you want to know when the child is completely done moving). Perhaps Motion (and StaggeredMotion) should gain an onRest attribute for now, and we can worry about per-value onRest in the future if it becomes an acute need. For now, you can fake it by composing Motions together.

Per-value onRest seems like a more advanced usage that would suit a timeline-based API better than what Motion currently provides.

[nkbt]

onRest === onSomethingLeft or something. See http://underscorejs.org/#rest for example.

I don't get the naming, sorry.

[chenglou]

I personally don't mind. But I'm opening a new issue to debate about the name so that we don't diverge this one: #274

[sompylasar]

It's like equilibrium, but easier to type.
http://www.ask.com/science/rest-position-wave-ec11b00c6b5ff960

[chenglou]

Alright so end callback is in for Motion (react-motion v0.4.3). If there's request for such cb for StaggeredMotion and TransitionMotion we should reopen this issue or create a new one.

Sorry for the wait everyone! And thank you again @appsforartists for actually implementing it =].

[ReDrUm]

Awesome, thanks!

[p4bloch]

@chenglou any news on when/if this will be implemented in TransitionMotion? I think that would keep consistency in the API and allow to have an easy, clean way to use that functionality (all I tried to use this with current implementation feels hacky).

If there's request for such cb for StaggeredMotion and TransitionMotion we should reopen this issue or create a new one.

Not sure if this is the proper way to make a formal request, but I think this could be pushed forward. Any thoughts?

Thanks!

[appsforartists]

@p4bloch Are you gonna own TransitionMotion.@onRest? You should start an issue to track your progress against, and submit a PR when it's ready. 😃

[eezoo]

+1 for the need to know when animation is finished (and/or fires)

[souporserious]

@SkateFreak you should be able to do this now with didLeave it was merged here and documented here.