Bug (spring): combining opacity with translate will hide element on web after animation

Combining opacity with translate will hide element on web after animation. (opacity will be set back to 0) This only happens with spring (also tried overshootClamping: false) I also tried the old way (without transform array) and the result is the same. It does the animation and hides it afterwards.

Works fine with type: "timing"

<MotiView
    from={{ opacity: 0, transform: [{ translateY: 100 }] }}
    animate={{ opacity: 1, transform: [{ translateY: 0 }] }}
    style={styles.title}
>

This works fine:

<MotiView
    from={{ opacity: 0, transform: [{ translateY: 100 }] }}
    animate={{ opacity: 1, transform: [{ translateY: 0 }] }}
    style={styles.title}
    transition={{ type: "timing" }}
>

Using opacity or transform alone, nothing breaks (even on spring). It just happens when combining them.

[nandorojo]

Fixed in upcoming Reanimated

[nandorojo]

you should try importing the web patch used in Reanimated 2.3.0-beta.2 (I think that’s it), or downgrade to RNW 0.15.6