Apply delays per component using single shared value

[Saphirah]

Hey fellow developers,

Here is a simplified example of my component.

export default function RangeAnimation(props: {animationProgress: SharedValue<number>, delay: number}){
    let derivedProgress = useDerivedValue(() => {
        return props.animationProgress.value //Introduce delay here?
    });

    let animationStyle = useAnimatedStyle(() => {
        'worklet';
        return({ opacity: props.animationProgress.value });
    });
    return(
        <Animated.View style={[animationStyle, {width: "100%", height: "100%", backgroundColor: "red"}]}/>
    );
}

In the parent component i spawn multiple RangeAnimations.
It is important that the animation progress is synced between them, therefore i am controlling the animations using a single SharedValue.

export function RangeParent(props: {}){
    let animationProgress = useSharedValue(0);

    useEffect(() => {
        animationProgress.value = withTiming(1, {duration: 1000});
    }, []);
    
    return(
        [100, 500, 1000, 2000].map((delay) => {
            return(
                <RangeAnimation key={delay} animationProgress={animationProgress} delay={delay}/>
            );
        })
    );
}

Now i want to introduce a delay for each animation. But how is that possible by only using a single sharedValue?
My idea was to create a derivedValue in my RangeAnimation component, but using withDelay does not work inside the derivedValue definition

let derivedProgress = useDerivedValue(() => {
        return props.animationProgress.value //Introduce delay here?
    });

Is there another way to achieve this? I am fine with creating more sharedValues, it is just important that the animation is synced (with a delay).

Thank you for your help 👍🏻

[MatiPl01]

Hey!

As I understand, be saying that the animation is synced you mean that the animation should be triggered at the same time for all of your range sliders, right?

I think that you cannot do this easily when you have a single (shared) progress value. Each range slider should have an independent progress as the delay affects its animation progress.

The easiest approach would be to have just one shared value that triggers the animation, such as:

const isAnimating = useSharedValue(false);

// Set to true when you want your animation to start
isAnimating.value = true;

And then, in your range slider components:

export default function RangeAnimation(props: {isAnimating: SharedValue<boolean>, delay: number}){
    const derivedProgress = useDerivedValue(() => {
        return isAnimating.value ? withDelay(withTiming(1, { duration: 1000 }), delay) : 0;
    });

    const animationStyle = useAnimatedStyle(() => {
        return { opacity: props.animationProgress.value };
    });
    return(
        <Animated.View style={[animationStyle, {width: "100%", height: "100%", backgroundColor: "red"}]}/>
    );
}

Hope it helps!