-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: Rewrite Layout Transition documentation page #6144
docs: Rewrite Layout Transition documentation page #6144
Conversation
New reanimated versions has fixes for layout transitions -> this PR is needed for [Layout Transitions](#6144) to work!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I remember that some parts of the documentation have unexpected structure due to some animation behaviour that is not longer present, I've highlighted them in case you want to polish them a bit.
Also I believe that this page of the documentation would benefit if you described the common animation modifiers just in one place on a top of the page:
.duration(duration: number) sets length of the animation (in milliseconds). Defaults to '500'.
.delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
.reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
.withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.
And then, for each layout transition you would name a subsection Custom Curved Transition Modifiers
or Custom Modifiers
instead of just Modifiers
. You could even create a compatibility table, just like in our compatibility guide showing which transition works with given modifier. It is possible, especially that we probably want to unify the duration across all the transition.
I would like you to think over all my suggestions, but feel free to reject them after this consideration.
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
New reanimated versions has fixes for layout transitions -> this PR is needed for [Layout Transitions](#6144) to work!
8b24f41
to
1d4f5e0
Compare
packages/docs-reanimated/static/recordings/layout_transitions/ios_fading_transition.mov
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
## Summary The `combineTransition` method doesn't seem to be necessary. It doesn't add any additional logic, duplicates the public API, and misleadingly suggests that `combineTransition` and `EntryExitTransition` are distinct entities. In fact, it has even been removed from the documentation page [here](#6144).
New reanimated versions has fixes for layout transitions -> this PR is needed for [Layout Transitions](#6144) to work!
3f04608
to
c20d20a
Compare
New reanimated versions has fixes for layout transitions -> this PR is needed for [Layout Transitions](#6144) to work!
afb32dd
to
36ce409
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are some rough edges but we're almost there!
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Left a small NIT but it isn't super important
packages/docs-reanimated/docs/layout-animations/layout-transitions.mdx
Outdated
Show resolved
Hide resolved
New reanimated versions has fixes for layout transitions -> this PR is needed for [Layout Transitions](#6144) to work!
To be up to date we rewritten Layout Transition, implemented InteractiveExample with selectable transition and added new, refreshed videos.
Jumping, Curved and Entry/Exit Transition are available on web
This needs latest react-native-reanimated@nightly
It includes new updated Fading default
duration
from this PR.check default duration in transitions
Before:
before.mov
After:
after.mov
How interactivExample works:
Screen.Recording.2024-06-20.at.14.37.20.mov