Set duration and delay when using withSpring in reanimated - react-native

Question

I am very new to reanimated and have it working to a certain extent but I can not seem to add the duration of the animation. I would also like to add a delay but that is not as important as the duration. I am trying to change the opacity and its Y position. I can change the duration of the opacity but not the Y position. I have tried messing with the settings like damping, stiffness etc but that does not change the actual duration.
Am I using it in the wrong way?
I am currently trying this :
const offset = useSharedValue(400);
const imgOpacity= useSharedValue(0);
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [
{
translateY: withSpring(offset.value, { mass: 0.1, damping: 100, stiffness: 100 }),
},
],
opacity: withTiming(imgOpacity.value, { duration: 1000 }),
};
});
I am changing the offset like this :
React.useEffect(() => {
if (show) {
offset.value = withSpring(10);
imgOpacity.value =1;
} else {
// alert("No Show")
}
}, [show]);
I have tried this to add withTiming but it is basically the same. Any advice would be appreciated.
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [
{
translateY : withTiming(offset.value, {
duration: 1,
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
}),
},
],
opacity: withTiming(imgOpacity.value, { duration: 1000 }),
};
});
The element I am trying to animate is this, is only has 3 images in it.
<Animated.View style={[animatedStyle]}>
<Image style={styles.BImage} source={{ uri: imgb }} />
<Image style={styles.AImage} source={{ uri: imga }} />
<Image style={styles.CImage} source={{ uri: imgc }} />
</Animated.View>

Answer 1

I have managed to achieve this but I am not sure this is the only and best way to do it. I added a config that is added to the Timing animation that adds a away to control the timing. I have also managed to add a delay before animation starts. I have added this in case anyone is starting out with reanimated and is having the same issue.
The code :
const offset = useSharedValue(90); // The offset is the Y value
const config = { // To control the lengh of the animation
duration: 500,
easing: Easing.bounce,
};
const animatedImg = useAnimatedStyle(() => { // The actual animation
return {
transform: [{ translateY: withTiming(offset.value, config) }],
};
});
<Animated.View style={[animatedImg2]}> // Object to animate
<Image
style={[styles.BImage]}
source={{
uri: 'https://image.tmdb.org/t/p/w440_and_h660_face/t6HIqrRAclMCA60NsSmeqe9RmNV.jpg',
}}
/>
</Animated.View>
The animated object can be moved by settting
offset.value = 200 // Method to change the Y value
Too add a delay before animation :
transform: [{ translateY: withDelay(1000, withTiming(offset.value, config)) }],