Shared Element Transition does not take current scale into account

[mrousavy]

Description

Hey all!

I've noticed a small bug in Shared Element Transitions, where the Animation does not take the current scale into account. See this video recording:

RPReplay_Final1701958592-2.mp4

You might want to watch this in QuickTime and go through this frame by frame - but as you can see I drag down the view to this scale:

...where it should start animating from. If we go to the next frame, we can see that the animation does not start at that scaled down state, but rather at the original scale:

...and then just scales down from that to it's target position.

It does work for the translation (it starts at the correct originY and originY), but not for scale. Both translation and scale are passed in the same parent view's style.

Steps to reproduce

1. Create Shared Element Transition
2. Scale down the View that contains the shared element
3. Run shared element transition at scaled down state
4. Notice that it does not start at scaled down state, but rather at scale 1.

Snack or a link to a repository

https://github.com/mrousavy/react-native-reanimated/tree/repro/shared-element-transition-bugs

Reanimated version

3.6.1

React Native version

0.72.7

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

iPhone 11 Pro

Acknowledgements

Yes

[mrousavy]

Okay - just created a minimal reproduction! I just updated the "[SET] Custom transition" example in the Reanimated playground in my branch here: https://github.com/mrousavy/react-native-reanimated/tree/repro/shared-element-transition-bugs

Simulator.Screen.Recording.-.iPhone.15.-.2023-12-07.at.15.35.27.mp4

[Laityned]

As an addition, I noticed that transformations applied to any parent element are also not taking into account. Therefore, transistion is happening from its original location and not from his current location