React Pose: PoseGroup events like onPoseComplete and onValueChange

[nevernotsean]

Is your feature request related to a problem? Please describe. I'm running into a few instances that having a callback for when a PoseGroups children have finished animating would be nice to have. One instance is writing an infinite scroll / endless loader with rows of items animating in. Users are able to rapidly scroll down and trigger the rendering of all rows, regardless of the completion of a previous row's animations.

Describe the solution you'd like An onPoseGroupComplete callback prop would be great for this, with an object that has relevant child pose information such as duration.

Describe alternatives you've considered I've considered incrementing a counter in the state with a complete state bool flagged once they reach a certain count, but state changes seem make animations of all children stutter. I'm able to string together an array of Promises, but the implementation feels clunky.

[Andarist]

Wouldnt passing those callback props to your posed elements work?

[nevernotsean]

If I understand correctly, passing the callback prop to the posed element would trigger as soon as the first item in an array of children completed. This isn't ideal for an array of staggered animations for children.

[Andarist]

Ok - if you need to know when all animations have ended then maybe some other prop should be introduced for PoseGroup. onPoseComplete is not the best name for this as from what I understand the PoseGroup itself doesnt change poses, it just manages poses of direct children.

It's also tricky because when the animation is playing new items might get added/removed causing more animations - so maybe smth like onRest would be appropriate for this?

[mattgperry]

Yeah and that might not be such a bad callback to implement as in React Native Pose’s Transition there’s logic that only sets state to remove the old children once all the animations have finished to prevent jank, I want to do something similar here so we could have a callback then On Wed, 19 Sep 2018 at 22:56, Mateusz Burzyński notifications@github.com wrote:

Ok - if you need to know when all animations have ended then maybe some other prop should be introduced for PoseGroup. onPoseComplete is not the best name for this as from what I understand the PoseGroup itself doesnt change poses, it just manages poses of direct children.

It's also tricky because when the animation is playing new items might get added/removed causing more animations - so maybe smth like onRest would be appropriate for this?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Popmotion/popmotion/issues/502#issuecomment-422972223, or mute the thread https://github.com/notifications/unsubscribe-auth/AHfLKuP0us_T2kr5LOMlWgLRKVp_aUCjks5ucr2agaJpZM4WwQW_ .

[Andarist]

Sounds, cool - that would resolve this https://github.com/Popmotion/popmotion/issues/363

[mattgperry]

Fixed in #509 and published in react-pose@3.3.4

<PoseGroup onRest={callback}>

[myleftshoe]

<PoseGroup> also animates children when they are reordered - onRest doesn't seem to fire in this case.

The problem: I have a list of items wrapped in a pose group that can be reordered by drag and drop. The drop performs a state update (specifically- reordering markers on a google map) which seems to interfere with the fluidity of the animation. I wanted to delay the state update until the animation finishes.

onPoseComplete fires for each of the children but was after just one event to indicate when all children have finished animating.