sync of multiple parallel withTiming execution

[tonieraco]

Hi, my question is about the flip card example at the link https://docs.swmansion.com/react-native-reanimated/examples/flipCard/. In that example, the withTiming function is used for the animation of both the regularCard and the flippedCard. I would like to detect the situation when both animations have finished in order to start another animation. Is this possible, and if so, how? If it's not possible but I want to keep the same visual effect, is there an example available? Thanks in advance

[tamish-max]

The simplest way to know when multiple visual pieces are “done” is to drive them from one shared progress value instead of starting separate withTimings.

Example:

const progress = useSharedValue(0);
progress.value = withTiming(1, { duration: 300 }, (finished) => {
  if (finished) {
    runOnJS(onComplete)();
  }
});

Then derive both card transforms from progress.value. That gives you one completion callback and keeps both sides in sync. If you keep two separate withTimings, you need an extra completion counter/flag, so a single driver value is usually simpler.

[MatiPl01]

Hey. What I'd suggest is using a single withTiming function that updates a single shared value representing a progress that is used by both animations. This is the most correct approach to keep updates in sync and doesn't require waiting until all withTiming animations complete.

If you need to wait for completion of all withTiming animations, though, you may create a helper shared value that serves as a counter and increment it on completion of each animation. When the value reaches the expected number of completed animations, you could trigger an action that you want to happen after all animations are complete. You should also reset the counter properly on animations start.