Shared Element Transitions in Jetpack Compose: examples, adoption and how they work
summary
Shows a Jetpack Compose 1.7.0-beta01 photo viewer using SharedTransitionLayout, Modifier.sharedElement(), rememberSharedContentState and AnimatedVisibility to animate images between grid and detail views. Describes problems (pager swipes breaking transitions and hidden targets stopping animations) and fixes: disable pager during transitions via a transitionActive flag, use a CompositionLocal to scope the transition state, and add a transitionEnabled flag so only the visible pager page participates, yielding reliable swipeable and drag-to-dismiss shared-element transitions.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 3:56Grid and detail views
- 6:06Shared Element Modifier
- 10:20Transition APIs
- 13:53Shared Transition Layout
- 19:59Horizontal swipe
- 23:30Animation conflicts
- 26:18Drag-and-drop
- 31:55Final adjustments
- 32:17Q&A
related talks
31mDesigning Media Friendly Jetpack Compose Components
47mAnimations with Compose: Make Your Apps Shimmering
21mAnimations with Jetpack Compose
01h 12mJetpack Compose over inheritance
19mUsing Jetpack libraries in Compose
33mMigrating to Jetpack Compose - an interop love story
37mAdvanced Layout Animations in Compose
36mPractical implementations of powerful UI expressions using Jetpack Compose