Delaying custom entering animation based on component index

[xzilja]

I've made custom entering animation i.e.

const enterAnimation: EntryExitAnimationFunction = () => {
  'worklet'
  const animations = {
    opacity: withTiming(1, AnimationTool.introTiming),
    transform: [
      { scale: withSpring(1, AnimationTool.introSpring) },
      { translateY: withSpring(0, AnimationTool.introSpring) },
      { rotate: withSpring('0deg', AnimationTool.introSpring) }
    ]
  }
  const initialValues = {
    opacity: 0,
    transform: [{ scale: 0.6 }, { translateY: 40 }, { rotate: '-5deg' }]
  }

  return { animations, initialValues }
}

And am using it on my views via

<>
  <Animated.View entering={enterAnimation} />
  <Animated.View entering={enterAnimation} />
  <Animated.View entering={enterAnimation} />
  <Animated.View entering={enterAnimation} />
  <Animated.View entering={enterAnimation} />
</>

This is working great, but I need to animate / enter each view with a different delay based on their index. I can easily add withDelay inside my custom animation, however am struggling how to make it dynamic, since such custom animation only takes pre-defined values like targetGlobalOriginX / targetGlobalOriginY etc... nor can I really template anything due to it being a worklet. Right now my only solution is to duplicate this animation 5 times and use hardcoded delay values, but I was wondering if it is possible to abstract this somehow.

here is example with delays added, I'm trying to figure out how to make that 1000 delay be dynamic i.e 1000 * elementIndex, I can pass index in any form.

const enterAnimation: EntryExitAnimationFunction = () => {
  'worklet'
  const animations = {
    opacity: withDelay(1000, withTiming(1, AnimationTool.introTiming)),
    transform: [
      { scale: withDelay(1000, withSpring(1, AnimationTool.introSpring)) },
      { translateY: withDelay(1000, withSpring(0, AnimationTool.introSpring)) },
      { rotate: withDelay(1000, withSpring('0deg', AnimationTool.introSpring)) }
    ]
  }
  const initialValues = {
    opacity: 0,
    transform: [{ scale: 0.6 }, { translateY: 40 }, { rotate: '-5deg' }]
  }

  return { animations, initialValues }
}

[AndhikaK]

This is what I do, create a wrapper View that accept the delay

const CustomEnterView = ({ delay, children }) => {
  const enterAnimation: EntryExitAnimationFunction = () => {
    "worklet";
    const animations = {
      opacity: withDelay(delay, withTiming(1, { duration: 500 })),
      transform: [
        { translateY: withDelay(delay, withTiming(0, { duration: 500 })) },
      ],
    };
    const initialValues = {
      opacity: 0,
      transform: [{ translateY: 30 }],
    };

    return { animations, initialValues };
  };

  return <Animated.View entering={enterAnimation}>{children}</Animated.View>;
};

Then in you can just use it like so

<>
  <CustomEnterView delay={500 * 1}>
    {/* children */}
  </CustomEnterView>
  <CustomEnterView delay={500 * 2}>
    {/* children */}
  </CustomEnterView>
  <CustomEnterView delay={500 * 3}>
    {/* children */}
  </CustomEnterView>
  <CustomEnterView delay={500 * 4}>
    {/* children */}
  </CustomEnterView>
</>

[MatiPl01]

Hey!
I know that this discussion is quite old but maybe this comment will help someone.

Solution 1

You can use the API that we use internally to create layout animations in the following way:

class MyLayoutAnimation
  extends ComplexAnimationBuilder
  implements IEntryExitAnimationBuilder
{
  static presetName = 'MyLayoutAnimation';

  static createInstance<T extends typeof BaseAnimationBuilder>(
    this: T
  ): InstanceType<T> {
    return new MyLayoutAnimation() as InstanceType<T>;
  }

  build = (): EntryExitAnimationFunction => {
    const delayFunction = this.getDelayFunction();
    const callback = this.callbackV;
    const initialValues = this.initialValues;
    const delay = this.getDelay();

    return () => {
      'worklet';
      return {
        animations: {
          opacity: delayFunction(
            delay,
            withTiming(1, AnimationTool.introTiming)
          ),
          transform: [
            {
              scale: delayFunction(
                delay,
                withSpring(1, AnimationTool.introSpring)
              ),
            },
            {
              translateY: delayFunction(
                delay,
                withSpring(0, AnimationTool.introSpring)
              ),
            },
            {
              rotate: delayFunction(
                delay,
                withSpring('0deg', AnimationTool.introSpring)
              ),
            },
          ],
        },
        initialValues: {
          opacity: 0,
          transform: [{ scale: 0.6 }, { translateY: 40 }, { rotate: '-5deg' }],
          ...initialValues,
        },
        callback,
      };
    };
  };
}

This will allow you to specify a custom delay, similarly as you can do with built-in layout animations:

<>
  <Animated.View style={styles.box} entering={MyLayoutAnimation} />
  <Animated.View style={styles.box} entering={MyLayoutAnimation.delay(1000)} />
  <Animated.View style={styles.box} entering={MyLayoutAnimation.delay(1500)} />
  <Animated.View style={styles.box} entering={MyLayoutAnimation.delay(2000)} />
</>

Solution 2

Alternatively, you can just wrap your layout animation function with a another function that accepts the delay parameter:

const MyLayoutAnimation =
  (delay = 0): EntryExitAnimationFunction =>
  () => {
    'worklet';
    const animations = {
      opacity: withDelay(delay, withTiming(1, AnimationTool.introTiming)),
      transform: [
        { scale: withDelay(delay, withSpring(1, AnimationTool.introSpring)) },
        {
          translateY: withDelay(
            delay,
            withSpring(0, AnimationTool.introSpring)
          ),
        },
        {
          rotate: withDelay(
            delay,
            withSpring('0deg', AnimationTool.introSpring)
          ),
        },
      ],
    };
    const initialValues = {
      opacity: 0,
      transform: [{ scale: 0.6 }, { translateY: 40 }, { rotate: '-5deg' }],
    };

    return { animations, initialValues };
  };

and use it as follows:

<>
  <Animated.View style={styles.box} entering={MyLayoutAnimation()} />
  <Animated.View style={styles.box} entering={MyLayoutAnimation(500)} />
  <Animated.View style={styles.box} entering={MyLayoutAnimation(1000)} />
  <Animated.View style={styles.box} entering={MyLayoutAnimation(1500)} />
</>