Repeating a repeating animation with delay with reanimated

Question

Using react-native-reanimated, I'm trying to repeat infinitely an animation which is also a repeated animation, with a delay.

With my code, the delay and the nested repeat animation are triggered but not the inifinite one.

Any ideas ?


useEffect(() => {
  progress.value = withRepeat(
   withDelay(2000, withRepeat(withTiming(0, { duration: 500 }), 6, true)),
   -1,
   true
  );
 }, []);

score 3 · Answer 1 · answered Oct 22 '22 at 09:06

Like @Abe pointed out in his answer, reverse property of withRepeat is not supported when wrapped with other animation modifiers.

But, you can do this without setInterval - making use of withSequence to simulate the `reverse animation

// starting delay of 2000ms
// play animation 6 times
// repeat

progress.value =
withRepeat(
  withDelay(2000, withRepeat(
    withSequence(
      // split duration of 500ms to 250ms
      withTiming(goToValue, {duration: 250, easing: Easing.inOut(Easing.ease)}),
      withTiming(initialValue, {duration: 250, easing: Easing.inOut(Easing.ease)}),
    )
  , 6))
, -1)

I think the second `withRepeat` is not necessary. – Kipnoedels Apr 25 '23 at 15:49 — Kipnoedels, Apr 25 '23 at 15:49

score 1 · Accepted Answer · answered Jul 15 '22 at 10:02

No solution found with Reanimated, but as suggested by @Abe,a simple setInterval does the trick

 useEffect(() => {
  progress.value = withRepeat(withTiming(0, { duration: 400 }), 6, true);
  const interval = setInterval(() => {
   progress.value = withRepeat(withTiming(0, { duration: 400 }), 6, true);
  }, 6000);
  return () => clearInterval(interval);
 }, []);

score 1 · Answer 3 · answered Feb 17 '23 at 04:24

You can achieve that without setInterval, put withDelay on each animation.

    withRepeat(
      withSequence(
        withDelay(
          2000,
          withTiming(0, {
            duration: 300,
            easing: Easing.inOut(Easing.ease),
          }),
        ),
        withDelay(
          2000,
          withTiming(1, {
            duration: 300,
            easing: Easing.inOut(Easing.ease),
          }),
        ),
      ),
      -1,
    );

score 0 · Answer 4 · answered Jul 11 '22 at 16:04

0

You've set the outer withRepeat to 1, so it should only repeat once, is that intended? Use a negative number to repeat indefinitely.

The docs for withRepeat say that withRepeat with the third argument (reverse) set to true doesn't work properly for the withDelay and withSequence animations, that could also be causing an issue. You might want to try reversing the animations manually in a withSequence call and repeating that.

answered Jul 11 '22 at 16:04

Abe

4,500
2
11
25

about the withRepeat set to 1, yes it was a typo. I've tried setting withRepeat's third argument to false too, but not working either. I've also tried to repeat a sequence of repeated animation and it's not working – Felix Perroud Jul 11 '22 at 16:47
Does it work without the delay? Does repeating a sequence work? Is there any nested repeat that works for you? – Abe Jul 11 '22 at 17:16
Thanks for your help Abe ! You are right, even the simpliest nested repeat does not work... is it me or do you think its a limitation ? I've tried to ask in the discussion tab of the reanimated github repo but no answer yet – Felix Perroud Jul 12 '22 at 20:22
That makes sense, and I think you've done the right thing with posting on the docs. I think if you need an interim solution it could be hacking something together with setInterval. – Abe Jul 12 '22 at 23:47
Yep, setInterval does the job for now ! – Felix Perroud Jul 15 '22 at 09:58

score -1 · Answer 5 · answered Jul 11 '22 at 09:44

You can achieve this by using Animated.sequence This code basically works by re-run the function when the animation done

 function fadeAnimation() {
    Animated.sequence([
      Animated.timing(progress.value, {
        toValue: 0,
        duration: 500,
        delay: 1000,
        useNativeDriver: true,
      }),
      Animated.timing(progress.value, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
      }),
    ]).start(() => {
        fadeAnimation();
    });
  }

    useEffect(() => {
        fadeAnimation()
    }, []);

This solution uses the React Native built-in Animated library, the original question is about Reanimated — Abe, Jul 11 '22 at 14:56

Repeating a repeating animation with delay with reanimated

5 Answers5