8.6 Released with 🥽 visionOS support and more!
Check it out
SharedTransition
Shared Element Transitions (preview) Allows you to auto animate between shared elements on two different screesn to create smooth navigational experiences. View components can define sharedTransitionTag="name" alone with a transition through this API.

Summary ​

Constructors ​

constructor ​

new SharedTransition(): SharedTransition
Returns SharedTransition

Properties ​

DEBUG ​

Static
DEBUG: boolean
Enable to see various console logging output of Shared Element Transition behavior.

finishedEvent ​

Static
finishedEvent: string
When the transition finishes.

inProgress ​

Static
inProgress: boolean
Whether a transition is in progress or not. Note: used internally however exposed in case custom state ordering is needed. Updated when transitions start/end/cancel.

interactiveCancelledEvent ​

Static
interactiveCancelledEvent: string
When the interactive transition cancels.

interactiveUpdateEvent ​

Static
interactiveUpdateEvent: string
When the interactive transition updates with the percent value.

startedEvent ​

Static
startedEvent: string
When the transition starts.

Methods ​

custom ​

Static
custom(transition: Transition, options?: SharedTransitionConfig): {}
Configure a custom transition with presentation/dismissal options.
Parameter Default Description
transition
Transition

The custom Transition instance.

options
SharedTransitionConfig

Returns {}

events ​

Static
events(): SharedTransitionObservable
Listen to various shared element transition events.
Returns SharedTransitionObservable

finishState ​

Static
finishState(id: number): void
Finish transition state.
Parameter Default Description
id
number

Transition instance id

Returns void

getSharedElements ​

Static
getSharedElements(fromPage: ViewBase, toPage: ViewBase): {
presented: View[];
presenting: View[];
}
Gather view collections based on sharedTransitionTag details.
Parameter Default Description
fromPage
ViewBase

Page moving away from

toPage
ViewBase

Page moving to

Returns { presented: View[]; presenting: View[]; }

getState ​

Static
getState(id: number): SharedTransitionState
Get current state for any transition.
Parameter Default Description
id
number

Transition instance id

Returns SharedTransitionState

notifyEvent ​

Static
notifyEvent(eventName: string, data: SharedTransitionEventDataPayload): void
Notify a Shared Transition event.
Parameter Default Description
eventName
string

Shared Transition event name

data
SharedTransitionEventDataPayload

Returns void

updateState ​

Static
updateState(id: number, state: SharedTransitionState): void
Update transition state.
Parameter Default Description
id
number

Transition instance id

state
SharedTransitionState

SharedTransitionState

Returns void
Next
SharedTransitionHelper