Wondering how to run several different animations in sequence with React Native Reanimated.

[Yummy-sk]

When running multiple different animations at once, I want to specify the order of execution between each animation.

For example, in React Native, a space like the one below.

• Animated sequence
• Animated parallel

Reanimated also has a withSequence, but it doesn't seem to be able to handle the order of execution of multiple animations.

So I'm wondering if there's a way to specify the order of execution of different animations, like sequence and parallel in React native.

Animated Example

const a = useRef(new Animated.Value(0))
const b = useRef(new Animated.Value(1))


const let animate = () => {
  Animated.sequence(
    a->Animated.config(...)
    b->Animated.config(...)
  ).start()
}

Expected Example

Animated Example

const a = useSharedValue(0)
const b = useSharedValue(1)


const let animate = () => {
  withSequence(
    a->withTiming(...)
    b->withTiming(...)
  ).start()

 // or
  withParallel(
    a->withTiming(...)
    b->withTiming(...)
  ).start()
}

[Noitidart]

Were you able to figure out withParallel?

[MatiPl01]

Hey!

Do you guys still have problems on reanimated v3? There is withSequence documentation page, which seems to be what you are looking for.

In terms of withParallel, I wonder how it may be supposed to work. If you have multiple shared values and would like to animate them in parallel, you don't have to do any extra steps, just update multiple values one after another in such a way:

const a = useSharedValue(0)
const b = useSharedValue(1)

// These both animations will run in parallel
a.value = withTiming(...)
b.value = withTiming(...)