Skip to content

fix(android): opacity not animating when combined with rotation#40

Merged
janicduplessis merged 1 commit intomainfrom
@janic/fix-android-opacity-rotation
Apr 14, 2026
Merged

fix(android): opacity not animating when combined with rotation#40
janicduplessis merged 1 commit intomainfrom
@janic/fix-android-opacity-rotation

Conversation

@janicduplessis
Copy link
Copy Markdown
Collaborator

Summary

On Android, animating opacity and rotate (or rotateX/rotateY) simultaneously causes opacity to not animate — the view stays fully opaque.

Root cause: React Native's ReactViewGroup.setBackfaceVisibilityDependantOpacity() resets alpha = backfaceOpacity (1.0) every frame. EaseView calls this during rotation animations to handle backface visibility, but it overrides the animated opacity value.

Fix: Skip the backface alpha reset when MASK_OPACITY is in the animated bitmask. In that case, the opacity animator manages alpha directly. Applied to all three call sites: first-mount setup, timing animator, and spring animator.

Test Plan

  • yarn lint && yarn test — all 82 tests pass
  • On Android: animate opacity and rotate simultaneously — opacity should now animate correctly
  • On iOS: no change (was already working)

setBackfaceVisibilityDependantOpacity() resets alpha to 1.0 every frame
during rotation animations, overriding animated opacity. Skip the
backface check when MASK_OPACITY is set — the opacity animator handles
alpha directly in that case.
@janicduplessis janicduplessis merged commit ef65bb6 into main Apr 14, 2026
5 checks passed
@janicduplessis janicduplessis deleted the @janic/fix-android-opacity-rotation branch April 14, 2026 03:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant