Reanimated v1 animate a value from 1 to 0 to 1 again

Question

I try to build a sequence animation where I animate a value (with timing) from 1 to 0, and then back again to 1. I am trying to build this using react native reanimated v1 and react-native-redash.

My animation code roughly looks like this:

import { timing } from "react-native-redash";

const opacity = useValue(1);

  useCode(
    () => [
      //fade out
      set(
        opacity,
        timing({
          from: 1,
          to: 0,
          duration: 100,
          //easing: Easing.inOut(Easing.ease),
        })
      ),
      // fade in, once we fully faded out
      cond(
        eq(opacity, 0),
        set(
          opacity,
          timing({
            from: 0,
            to: 1,
            duration: 100,
            //easing: Easing.inOut(Easing.ease),
          })
        )
      ),
      debug("opacity", opacity),
    ],
    [config.rightElements, opacity]
  );

The debug output is this:

//this is fine, animating from 1 -> 0
opacity 1
opacity 0.8663746803998947
opacity 0.6997080102562905
opacity 0.5330413401126861
opacity 0.36637466996908186
opacity 0.19970800012350087
opacity 0.03304133057594294
opacity 0
//why on earth is this 1, and animated to 0 again?
opacity 1
opacity 0.8333333298563957
opacity 0.6666666597127915
opacity 0.49999999016523367
opacity 0.3333333200216293
opacity 0.16666664987802504
opacity 1

As you can see in the log, it doesn't animate as I expect. The first animation from 1 to 0 works, but then it animates from 1 to 0 again! I tried removing the condition, I thought it would run in a sequence - it doesn't. Tried to execute the second node with a delay, didn't work: same result.

Any help would be greatly appreciated. I am quite new to reanimated.

Reanimated v1 animate a value from 1 to 0 to 1 again

0 Answers0