Merged
Conversation
piaskowyk
reviewed
Jul 15, 2024
piaskowyk
approved these changes
Jul 16, 2024
This was referenced Oct 1, 2024
This was referenced Oct 3, 2024
This was referenced Oct 4, 2024
r0h0gg6
pushed a commit
to r0h0gg6/react-native-reanimated
that referenced
this pull request
Jul 28, 2025
## Summary This PR adds `EntryExitTransition` to set of transitions available on `web`. This transition is different from others, therefore logic behind its creation is also different. ### Two animations First approach was to run 2 animations - `exiting` and `entering`. While it seemed like an easier approach, there were few problems: - It lead to many code duplications (especially when starting animation, handling `end`/`cancel`) - I couldn't find a way to keep elements in good positions (`transform` was overriden by animations and we need to use it to put element back in its starting position) While I haven't observed any flickers caused by having 2 animations, arguments above made me try seconds approach) ### Dynamic keyframe Second approach to this problem involves creating dynamic keyframe animation - just like in case of other transitions. First we obtain data of both `exiting` and `entering` animations. Then we perform two operations: 1. We add calculated transform into `exiting` animation (`unshift` is used to make sure that it will be placed at the beginning of keyframe timestamps 2. We merge two animations object into one keyframe data object. In 2. we have to make sure that both animations will fit in one keyframe, therefore `exiting` animation is squeezed into interval `[0,49]` and `entering` animation runs from `50` to `100`. ### Examples https://github.com/software-mansion/react-native-reanimated/assets/63123542/6ee7fcfe-4ebd-41cf-bc33-9ab7d262b20b https://github.com/software-mansion/react-native-reanimated/assets/63123542/a9d15f48-c158-461b-8343-33c6d20ae5bd ## Test plan Verified on `DefaultLayoutTransitions` example.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds
EntryExitTransitionto set of transitions available onweb.This transition is different from others, therefore logic behind its creation is also different.
Two animations
First approach was to run 2 animations -
exitingandentering. While it seemed like an easier approach, there were few problems:end/cancel)transformwas overriden by animations and we need to use it to put element back in its starting position)While I haven't observed any flickers caused by having 2 animations, arguments above made me try seconds approach)
Dynamic keyframe
Second approach to this problem involves creating dynamic keyframe animation - just like in case of other transitions. First we obtain data of both
exitingandenteringanimations. Then we perform two operations:exitinganimation (unshiftis used to make sure that it will be placed at the beginning of keyframe timestampsIn 2. we have to make sure that both animations will fit in one keyframe, therefore
exitinganimation is squeezed into interval[0,49]andenteringanimation runs from50to100.Examples
Nagranie.z.ekranu.2024-07-8.o.14.28.38.mov
Nagranie.z.ekranu.2024-07-8.o.14.42.40.mov
Test plan
Verified on
DefaultLayoutTransitionsexample.