diff --git a/apps/toolbox/src/pages/transitions.ts b/apps/toolbox/src/pages/transitions.ts
index adf7d7777..85a49921a 100644
--- a/apps/toolbox/src/pages/transitions.ts
+++ b/apps/toolbox/src/pages/transitions.ts
@@ -6,50 +6,27 @@ export function navigatingTo(args: EventData) {
 	page.bindingContext = new TransitionsModel();
 }
 
-// class SampleCustomModalTransition extends ModalTransition implements TransitionType {
-
-// }
-// SharedTransition.DEBUG = true;
 export class TransitionsModel extends Observable {
-	open() {
+	open(args: EventData) {
+		const type = (<any>args.object).type;
+		let moduleName: string;
+		switch (type) {
+			case '1':
+				moduleName = `pages/transitions/transition-example`;
+				break;
+			case '2':
+				moduleName = `pages/transitions/transition-page-modal-example`;
+				break;
+		}
 		page.frame.navigate({
-			moduleName: `pages/transitions/transitions-detail`,
+			moduleName,
 			transition: SharedTransition.custom(new PageTransition(), {
 				interactive: {
 					dismiss: {
 						finishThreshold: 0.5,
 					},
 				},
-				// toPageStart: {
-				// 	duration: 1000,
-				// },
-				// fromPageEnd: {
-				// 	duration: 500,
-				// },
 			}),
 		});
 	}
-
-	openModal() {
-		page.showModal('pages/transitions/transitions-modal', {
-			transition: SharedTransition.custom(new ModalTransition(), {
-				interactive: {
-					dismiss: {
-						finishThreshold: 0.5,
-					},
-				},
-				pageStart: {
-					y: 200,
-					// duration: 400,
-				},
-				pageReturn: {
-					y: 100,
-					// duration: 500,
-				},
-			}),
-			closeCallback(args) {
-				// console.log('close modal callback', args);
-			},
-		} as ShowModalOptions);
-	}
 }
diff --git a/apps/toolbox/src/pages/transitions.xml b/apps/toolbox/src/pages/transitions.xml
index 28b7d8d93..c8ae4a016 100644
--- a/apps/toolbox/src/pages/transitions.xml
+++ b/apps/toolbox/src/pages/transitions.xml
@@ -4,20 +4,10 @@
     </ActionBar>
   </Page.actionBar>
 
-  <GridLayout rows="*,auto,auto,*">
-    <GridLayout row="1" rows="auto,auto" tap="{{ open }}">
-      <Image sharedTransitionTag="image" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" width="100" />
-      <Label row="1" text="Open Page" class="text-center" color="black" />
-    </GridLayout>
-
-    <GridLayout row="2" rows="auto,auto,auto,auto" tap="{{ openModal }}" marginTop="50">
-      <Image sharedTransitionTag="image-modal" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" width="100" />
-      <Label row="1" text="NativeScript Rocks!" sharedTransitionTag="open-modal-label" class="text-center" color="black" />
-
-      <ContentView row="2" sharedTransitionTag="open-modal-box1" borderWidth="5" borderColor="yellow" marginTop="20" width="50" height="50" borderRadius="999" backgroundColor="purple" />
-      <ContentView row="3" sharedTransitionTag="open-modal-box2" marginTop="20" width="20" height="20" borderRadius="999" backgroundColor="orange" />
-      <ContentView row="3" sharedTransitionTag="open-modal-box3" marginTop="20" width="20" height="20" borderRadius="999" backgroundColor="red" horizontalAlignment="left" marginLeft="100" />
-      <ContentView row="4" sharedTransitionTag="open-modal-box4" marginTop="20" width="20" height="20" borderRadius="999" backgroundColor="pink" horizontalAlignment="right" marginRight="100" />
-    </GridLayout>
+  <GridLayout rows="*,auto,*" class="p-20">
+    <StackLayout row="1">
+      <Button text="Open Testing Examples" class="btn btn-primary btn-view-demo" tap="{{open}}" type="1" />
+      <Button text="Open Page and Modal Example" class="btn btn-primary btn-view-demo" tap="{{open}}" type="2" />
+    </StackLayout>
   </GridLayout>
 </Page>
diff --git a/apps/toolbox/src/pages/transitions/transition-example-detail.ts b/apps/toolbox/src/pages/transitions/transition-example-detail.ts
new file mode 100644
index 000000000..40531ba64
--- /dev/null
+++ b/apps/toolbox/src/pages/transitions/transition-example-detail.ts
@@ -0,0 +1,37 @@
+import { Observable, EventData, Page, NavigatedData } from '@nativescript/core';
+let page: Page;
+
+export function navigatingTo(args: NavigatedData) {
+	bindPage(args, args.context);
+}
+
+let closeCallback;
+
+export function onShownModally(args) {
+	bindPage(args, args.context);
+	closeCallback = args.closeCallback;
+}
+
+function bindPage(args, context: any) {
+	page = <Page>args.object;
+	page.bindingContext = new TransitionsModel(context);
+}
+
+export class TransitionsModel extends Observable {
+	example1 = true;
+	example2: boolean;
+	example3: boolean;
+	dynamicTag: string;
+	constructor(options: { isModal?: boolean; example2?: boolean; example3?: boolean; dynamicTag?: string }) {
+		super();
+		this.example1 = options.example2 || options.example3 ? false : true;
+		this.example2 = options.example2;
+		this.example3 = options.example3;
+		this.dynamicTag = options.dynamicTag;
+	}
+	close() {
+		if (closeCallback) {
+			closeCallback();
+		}
+	}
+}
diff --git a/apps/toolbox/src/pages/transitions/transition-example-detail.xml b/apps/toolbox/src/pages/transitions/transition-example-detail.xml
new file mode 100644
index 000000000..27d1397f3
--- /dev/null
+++ b/apps/toolbox/src/pages/transitions/transition-example-detail.xml
@@ -0,0 +1,22 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" shownModally="onShownModally" class="page">
+  <Page.actionBar>
+    <ActionBar title="Transitions Example Detail" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+
+  <GridLayout>
+    <Button text="Close" tap="{{close}}" visibility="{{ isModal ? 'visible' : 'collapsed' }}" horizontalAlignment="left" verticalAlignment="top" marginTop="20" marginLeft="20" />
+    <ContentView width="80%" height="300" borderRadius="20" backgroundColor="green" sharedTransitionTag="fab" horizontalAlignment="center" verticalAlignment="top" marginTop="100" visibility="{{ example1 ? 'visible' : 'collapsed' }}" />
+
+    <GridLayout visibility="{{ example2 ? 'visible' : 'collapsed' }}">
+        <ContentView width="200" height="200" borderRadius="100" backgroundColor="purple" sharedTransitionTag="shape1" verticalAlignment="top" horizontalAlignment="right" marginRight="20" marginTop="20" iosIgnoreSafeArea="true" />
+        <ContentView width="80" height="80" borderRadius="40" backgroundColor="orange" sharedTransitionTag="shape2" verticalAlignment="top" horizontalAlignment="left" marginLeft="20" marginTop="20" iosIgnoreSafeArea="true" />
+        <ContentView width="20" height="20" borderRadius="10" backgroundColor="brown" sharedTransitionTag="shape3" verticalAlignment="bottom" horizontalAlignment="right" marginRight="20" iosIgnoreSafeArea="true" />
+        <ContentView width="150" height="150" borderRadius="75" backgroundColor="yellow" sharedTransitionTag="shape4" verticalAlignment="bottom" horizontalAlignment="left" marginLeft="20" iosIgnoreSafeArea="true" />
+    </GridLayout>
+
+    <GridLayout visibility="{{ example3 ? 'visible' : 'collapsed' }}">
+        <ContentView width="80%" height="200" borderRadius="20" backgroundColor="purple" sharedTransitionTag="{{dynamicTag}}" verticalAlignment="top" horizontalAlignment="center" marginRight="20" marginTop="20" iosIgnoreSafeArea="true" />
+    </GridLayout>
+  </GridLayout>
+</Page>
diff --git a/apps/toolbox/src/pages/transitions/transition-example.ts b/apps/toolbox/src/pages/transitions/transition-example.ts
new file mode 100644
index 000000000..3a7224dd7
--- /dev/null
+++ b/apps/toolbox/src/pages/transitions/transition-example.ts
@@ -0,0 +1,111 @@
+import { Observable, EventData, Page, ShowModalOptions, SharedTransition, ModalTransition, PageTransition, FadeTransition, SlideTransition, PropertyChangeData } from '@nativescript/core';
+let page: Page;
+// SharedTransition.DEBUG = true;
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new TransitionsModel();
+}
+
+let updatedSegmentValue: number;
+if (typeof updatedSegmentValue === 'undefined') {
+	updatedSegmentValue = 0;
+}
+export class TransitionsModel extends Observable {
+	segmentSelectedIndex = updatedSegmentValue;
+
+	items = [
+		{
+			title: 'Homer',
+			dynamicTag: 'dynamic1',
+		},
+		{
+			title: 'Marge',
+			dynamicTag: 'dynamic2',
+		},
+		{
+			title: 'Bart',
+			dynamicTag: 'dynamic3',
+		},
+		{
+			title: 'Lisa',
+			dynamicTag: 'dynamic4',
+		},
+		{
+			title: 'Maggie',
+			dynamicTag: 'dynamic5',
+		},
+	];
+
+	constructor() {
+		super();
+		this.on(Observable.propertyChangeEvent, (data: PropertyChangeData) => {
+			if (data.propertyName === 'segmentSelectedIndex') {
+				console.log('change segmentSelectedIndex--');
+				console.log(data.value);
+				updatedSegmentValue = data.value;
+				this.segmentSelectedIndex = data.value;
+			}
+		});
+	}
+
+	open(args) {
+		const moduleName = `pages/transitions/transition-example-detail`;
+		const context: any = {
+			example2: !!args.object.example2,
+			example3: !!args.object.example3,
+			dynamicTag: args.object.dynamicTag,
+		};
+		page.frame.navigate({
+			moduleName,
+			context,
+			transition: SharedTransition.custom(new PageTransition(), {
+				interactive: {
+					dismiss: {
+						finishThreshold: 0.5,
+					},
+				},
+				// pageEnd: {
+				// 	duration: 3000
+				// },
+				// pageReturn: {
+				// 	duration: 1000
+				// }
+			}),
+		});
+
+		// Try modals as well:
+		// context.isModal = true;
+		// page.showModal(moduleName, {
+		//	context,
+		// 	transition: SharedTransition.custom(new ModalTransition(), {
+		// 		interactive: {
+		// 			dismiss: {
+		// 				finishThreshold: 0.5,
+		// 			},
+		// 		},
+		// 		pageStart: {
+		// 			y: 200,
+		// 			// duration: 400,
+		// 		},
+		// 		pageReturn: {
+		// 			y: 100,
+		// 			// duration: 500,
+		// 		},
+		// 	}),
+		// 	closeCallback(args) {
+		// 		// console.log('close modal callback', args);
+		// 	},
+		// } as ShowModalOptions);
+	}
+
+	onItemTap(args) {
+		const item = this.items[args.index];
+		console.log(item);
+		this.open({
+			object: {
+				example3: true,
+				dynamicTag: item.dynamicTag,
+			},
+		});
+	}
+}
diff --git a/apps/toolbox/src/pages/transitions/transition-example.xml b/apps/toolbox/src/pages/transitions/transition-example.xml
new file mode 100644
index 000000000..8fa594323
--- /dev/null
+++ b/apps/toolbox/src/pages/transitions/transition-example.xml
@@ -0,0 +1,40 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <Page.actionBar>
+    <ActionBar title="Transitions Example 1" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+
+  <GridLayout rows="auto,*">
+    <SegmentedBar sharedTransitionTag="segmentbar" horizontalAlignment="center" selectedIndex="{{ segmentSelectedIndex }}" marginTop="20">
+      <SegmentedBarItem title="Example A" />
+      <SegmentedBarItem title="Example B" />
+      <SegmentedBarItem title="Example C" />
+    </SegmentedBar>
+
+    <!-- Example A: Fab -->
+    <ContentView visibility="{{ segmentSelectedIndex === 0 ? 'visible' : 'collapsed' }}" row="1" width="75" height="75" borderRadius="38" backgroundColor="#65adf1" sharedTransitionTag="fab" horizontalAlignment="right" verticalAlignment="bottom" marginBottom="20" marginRight="30" tap="{{open}}" sharedTransitionIgnore="{{segmentSelectedIndex!==0}}" />
+
+    <!-- Example B: Multiple Shapes in Layout Containers -->
+    <GridLayout row="1" visibility="{{ segmentSelectedIndex === 1 ? 'visible' : 'collapsed' }}" tap="{{open}}" marginTop="20" example2="true">
+      <GridLayout rows="" columns="*,auto,*,auto,*,auto,*,auto,*" verticalAlignment="bottom" marginBottom="20">
+        <ContentView col="1" width="40" height="40" borderRadius="20" backgroundColor="#65adf1" sharedTransitionTag="shape1" sharedTransitionIgnore="{{segmentSelectedIndex!==1}}" />
+        <ContentView col="3" width="40" height="40" borderRadius="20" backgroundColor="#65adf1" sharedTransitionTag="shape2" sharedTransitionIgnore="{{segmentSelectedIndex!==1}}" />
+        <ContentView col="5" width="40" height="40" borderRadius="20" backgroundColor="#65adf1" sharedTransitionTag="shape3" sharedTransitionIgnore="{{segmentSelectedIndex!==1}}" />
+        <ContentView col="7" width="40" height="40" borderRadius="20" backgroundColor="#65adf1" sharedTransitionTag="shape4" sharedTransitionIgnore="{{segmentSelectedIndex!==1}}" />
+      </GridLayout>
+    </GridLayout>
+
+
+    <!-- Example C: Dynamic sharedTransitionTags passed around -->
+    <GridLayout row="2" visibility="{{ segmentSelectedIndex === 2 ? 'visible' : 'collapsed' }}" marginTop="20" example3="true">
+      <ListView items="{{ items }}" itemTap="{{onItemTap}}" separatorColor="transparent">
+        <ListView.itemTemplate>
+          <GridLayout columns="auto,*" padding="8">
+            <ContentView marginLeft="10" width="40" height="40" borderRadius="20" backgroundColor="#65adf1" sharedTransitionTag="{{dynamicTag}}" />
+            <Label col="1" marginLeft="10" text="{{ title }}" />
+          </GridLayout>
+        </ListView.itemTemplate>
+      </ListView>
+    </GridLayout>
+  </GridLayout>
+</Page>
diff --git a/apps/toolbox/src/pages/transitions/transition-page-modal-example.ts b/apps/toolbox/src/pages/transitions/transition-page-modal-example.ts
new file mode 100644
index 000000000..476acb01a
--- /dev/null
+++ b/apps/toolbox/src/pages/transitions/transition-page-modal-example.ts
@@ -0,0 +1,56 @@
+import { Observable, EventData, Page, ShowModalOptions, SharedTransition, ModalTransition, PageTransition, FadeTransition, SlideTransition } from '@nativescript/core';
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new TransitionsModel();
+}
+
+// Could create a complete custom example which extends some of the built in options
+// class SampleCustomModalTransition extends ModalTransition implements TransitionType {
+
+// }
+// SharedTransition.DEBUG = true;
+export class TransitionsModel extends Observable {
+	open() {
+		page.frame.navigate({
+			moduleName: `pages/transitions/transitions-detail`,
+			transition: SharedTransition.custom(new PageTransition(), {
+				interactive: {
+					dismiss: {
+						finishThreshold: 0.5,
+					},
+				},
+				// toPageStart: {
+				// 	duration: 1000,
+				// },
+				// fromPageEnd: {
+				// 	duration: 500,
+				// },
+			}),
+		});
+	}
+
+	openModal() {
+		page.showModal('pages/transitions/transitions-modal', {
+			transition: SharedTransition.custom(new ModalTransition(), {
+				interactive: {
+					dismiss: {
+						finishThreshold: 0.5,
+					},
+				},
+				pageStart: {
+					y: 200,
+					// duration: 400,
+				},
+				pageReturn: {
+					y: 100,
+					// duration: 500,
+				},
+			}),
+			closeCallback(args) {
+				// console.log('close modal callback', args);
+			},
+		} as ShowModalOptions);
+	}
+}
diff --git a/apps/toolbox/src/pages/transitions/transition-page-modal-example.xml b/apps/toolbox/src/pages/transitions/transition-page-modal-example.xml
new file mode 100644
index 000000000..28b7d8d93
--- /dev/null
+++ b/apps/toolbox/src/pages/transitions/transition-page-modal-example.xml
@@ -0,0 +1,23 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <Page.actionBar>
+    <ActionBar title="Transitions" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+
+  <GridLayout rows="*,auto,auto,*">
+    <GridLayout row="1" rows="auto,auto" tap="{{ open }}">
+      <Image sharedTransitionTag="image" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" width="100" />
+      <Label row="1" text="Open Page" class="text-center" color="black" />
+    </GridLayout>
+
+    <GridLayout row="2" rows="auto,auto,auto,auto" tap="{{ openModal }}" marginTop="50">
+      <Image sharedTransitionTag="image-modal" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" width="100" />
+      <Label row="1" text="NativeScript Rocks!" sharedTransitionTag="open-modal-label" class="text-center" color="black" />
+
+      <ContentView row="2" sharedTransitionTag="open-modal-box1" borderWidth="5" borderColor="yellow" marginTop="20" width="50" height="50" borderRadius="999" backgroundColor="purple" />
+      <ContentView row="3" sharedTransitionTag="open-modal-box2" marginTop="20" width="20" height="20" borderRadius="999" backgroundColor="orange" />
+      <ContentView row="3" sharedTransitionTag="open-modal-box3" marginTop="20" width="20" height="20" borderRadius="999" backgroundColor="red" horizontalAlignment="left" marginLeft="100" />
+      <ContentView row="4" sharedTransitionTag="open-modal-box4" marginTop="20" width="20" height="20" borderRadius="999" backgroundColor="pink" horizontalAlignment="right" marginRight="100" />
+    </GridLayout>
+  </GridLayout>
+</Page>
diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts
index 32236ff13..7ddb0cfa9 100644
--- a/packages/core/ui/core/view-base/index.ts
+++ b/packages/core/ui/core/view-base/index.ts
@@ -372,6 +372,10 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 	 * Gets or sets the shared transition tag for animated view transitions
 	 */
 	public sharedTransitionTag: string;
+	/**
+	 * Opt out of shared transition under different binding conditions
+	 */
+	public sharedTransitionIgnore: boolean;
 
 	public _domId: number;
 	public _context: any /* android.content.Context */;
diff --git a/packages/core/ui/transition/index.d.ts b/packages/core/ui/transition/index.d.ts
index 804908540..25ab068ae 100644
--- a/packages/core/ui/transition/index.d.ts
+++ b/packages/core/ui/transition/index.d.ts
@@ -1,8 +1,8 @@
 import type { View } from '../core/view';
 import type { BackstackEntry } from '../frame';
 export type SharedElementSettings = { view: View; startFrame: any; endFrame?: any; startOpacity?: number; endOpacity?: number; scale?: { x?: number; y?: number }; startTransform?: any; snapshot?: any };
-export type SharedTransitionType = 'page' | 'modal';
-export interface SharedInteractiveState {
+export type TransitionNavigationType = 'page' | 'modal';
+export interface TransitionInteractiveState {
 	started?: false;
 	added?: boolean;
 	transitionContext?: any;
diff --git a/packages/core/ui/transition/index.ios.ts b/packages/core/ui/transition/index.ios.ts
index 93a554cdb..4d4bc06f1 100644
--- a/packages/core/ui/transition/index.ios.ts
+++ b/packages/core/ui/transition/index.ios.ts
@@ -18,6 +18,10 @@ export class Transition implements TransitionType {
 		return this._duration;
 	}
 
+	public setDuration(value: number) {
+		this._duration = value;
+	}
+
 	public getCurve(): UIViewAnimationCurve {
 		return this._curve;
 	}
diff --git a/packages/core/ui/transition/modal-transition.ios.ts b/packages/core/ui/transition/modal-transition.ios.ts
index 5f0b444ca..555aaf86c 100644
--- a/packages/core/ui/transition/modal-transition.ios.ts
+++ b/packages/core/ui/transition/modal-transition.ios.ts
@@ -1,9 +1,7 @@
 import type { View } from '../core/view';
-import { Screen } from '../../platform';
-import { iOSNativeHelper } from '../../utils/native-helper';
 import { isNumber } from '../../utils/types';
-import { Transition, SharedElementSettings, SharedInteractiveState } from '.';
-import { SharedTransition, SharedTransitionAnimationType, DEFAULT_DURATION, DEFAULT_SPRING, getRectFromProps, getPageStartDefaultsForType } from './shared-transition';
+import { Transition, SharedElementSettings, TransitionInteractiveState } from '.';
+import { SharedTransition, DEFAULT_DURATION } from './shared-transition';
 import { SharedTransitionHelper } from './shared-transition-helper';
 import { PanGestureEventData, GestureStateTypes } from '../gestures';
 
@@ -103,7 +101,7 @@ export class ModalTransition extends Transition {
 class PercentInteractiveController extends UIPercentDrivenInteractiveTransition implements UIViewControllerInteractiveTransitioning {
 	static ObjCProtocols = [UIViewControllerInteractiveTransitioning];
 	owner: WeakRef<ModalTransition>;
-	interactiveState: SharedInteractiveState;
+	interactiveState: TransitionInteractiveState;
 
 	static initWithOwner(owner: WeakRef<ModalTransition>) {
 		const ctrl = <PercentInteractiveController>PercentInteractiveController.new();
diff --git a/packages/core/ui/transition/page-transition.android.ts b/packages/core/ui/transition/page-transition.android.ts
index 0df1e55ac..9b463c5c1 100644
--- a/packages/core/ui/transition/page-transition.android.ts
+++ b/packages/core/ui/transition/page-transition.android.ts
@@ -80,6 +80,9 @@ export class PageTransition extends FadeTransition {
 		if (curve) {
 			console.warn('PageTransition does not support custom curves at the moment. The passed in curve will be ignored.');
 		}
+		if (typeof duration !== 'number') {
+			duration = 500;
+		}
 		super(duration);
 	}
 
diff --git a/packages/core/ui/transition/page-transition.ios.ts b/packages/core/ui/transition/page-transition.ios.ts
index 14e07f950..3d48d7176 100644
--- a/packages/core/ui/transition/page-transition.ios.ts
+++ b/packages/core/ui/transition/page-transition.ios.ts
@@ -1,5 +1,5 @@
 import type { View } from '../core/view';
-import { SharedElementSettings, SharedInteractiveState, Transition } from '.';
+import { SharedElementSettings, TransitionInteractiveState, Transition } from '.';
 import { isNumber } from '../../utils/types';
 import { PanGestureEventData, GestureStateTypes } from '../gestures';
 import { SharedTransition, DEFAULT_DURATION } from './shared-transition';
@@ -122,7 +122,7 @@ export class PageTransition extends Transition {
 class PercentInteractiveController extends UIPercentDrivenInteractiveTransition implements UIViewControllerInteractiveTransitioning {
 	static ObjCProtocols = [UIViewControllerInteractiveTransitioning];
 	owner: WeakRef<PageTransition>;
-	interactiveState: SharedInteractiveState;
+	interactiveState: TransitionInteractiveState;
 
 	static initWithOwner(owner: WeakRef<PageTransition>) {
 		const ctrl = <PercentInteractiveController>PercentInteractiveController.new();
diff --git a/packages/core/ui/transition/shared-transition-helper.android.ts b/packages/core/ui/transition/shared-transition-helper.android.ts
index 60f9183a8..8113f943b 100644
--- a/packages/core/ui/transition/shared-transition-helper.android.ts
+++ b/packages/core/ui/transition/shared-transition-helper.android.ts
@@ -1,7 +1,8 @@
+import { TransitionNavigationType } from '.';
 import { SharedTransitionState } from './shared-transition';
 
 export class SharedTransitionHelper {
-	static animate(state: SharedTransitionState, transitionContext: any, type: 'page' | 'modal') {
+	static animate(state: SharedTransitionState, transitionContext: any, type: TransitionNavigationType) {
 		// may be able to consolidate android handling here in future
 	}
 }
diff --git a/packages/core/ui/transition/shared-transition-helper.ios.ts b/packages/core/ui/transition/shared-transition-helper.ios.ts
index 2543bd62a..d251b46fa 100644
--- a/packages/core/ui/transition/shared-transition-helper.ios.ts
+++ b/packages/core/ui/transition/shared-transition-helper.ios.ts
@@ -1,16 +1,16 @@
-import type { SharedInteractiveState, SharedTransitionType } from '.';
-import { getPageStartDefaultsForType, getRectFromProps, getSpringFromProps, SharedTransition, SharedTransitionAnimationType, SharedTransitionState } from './shared-transition';
-import { fromObject } from '../../data/observable';
+import type { TransitionInteractiveState, TransitionNavigationType } from '.';
+import { getPageStartDefaultsForType, getRectFromProps, getSpringFromProps, SharedTransition, SharedTransitionAnimationType, SharedTransitionEventData, SharedTransitionState } from './shared-transition';
 import { isNumber } from '../../utils/types';
 import { Screen } from '../../platform';
 import { iOSNativeHelper } from '../../utils/native-helper';
 
-interface PlatformSharedInteractiveState extends SharedInteractiveState {
+interface PlatformTransitionInteractiveState extends TransitionInteractiveState {
 	transitionContext?: UIViewControllerContextTransitioning;
 	propertyAnimator?: UIViewPropertyAnimator;
 }
+
 export class SharedTransitionHelper {
-	static animate(state: SharedTransitionState, transitionContext: UIViewControllerContextTransitioning, type: SharedTransitionType) {
+	static animate(state: SharedTransitionState, transitionContext: UIViewControllerContextTransitioning, type: TransitionNavigationType) {
 		const transition = state.instance;
 		setTimeout(() => {
 			// Run on next tick
@@ -19,13 +19,13 @@ export class SharedTransitionHelper {
 			switch (state.activeType) {
 				case SharedTransitionAnimationType.present: {
 					// console.log('-- Transition present --');
-					SharedTransition.events().notify({
+					SharedTransition.events().notify<SharedTransitionEventData>({
 						eventName: SharedTransition.startedEvent,
-						object: fromObject({
+						data: {
 							id: transition.id,
 							type,
 							action: 'present',
-						}),
+						},
 					});
 
 					if (type === 'modal') {
@@ -221,13 +221,13 @@ export class SharedTransitionHelper {
 							transition.presenting.view.removeFromSuperview();
 						}
 						transitionContext.completeTransition(true);
-						SharedTransition.events().notify({
+						SharedTransition.events().notify<SharedTransitionEventData>({
 							eventName: SharedTransition.finishedEvent,
-							object: fromObject({
+							data: {
 								id: transition?.id,
 								type,
 								action: 'present',
-							}),
+							},
 						});
 					};
 
@@ -312,13 +312,13 @@ export class SharedTransitionHelper {
 				}
 				case SharedTransitionAnimationType.dismiss: {
 					// console.log('-- Transition dismiss --');
-					SharedTransition.events().notify({
+					SharedTransition.events().notify<SharedTransitionEventData>({
 						eventName: SharedTransition.startedEvent,
-						object: fromObject({
+						data: {
 							id: transition?.id,
 							type,
 							action: 'dismiss',
-						}),
+						},
 					});
 					if (type === 'page') {
 						transitionContext.containerView.insertSubviewBelowSubview(transition.presenting.view, transition.presented.view);
@@ -362,13 +362,13 @@ export class SharedTransitionHelper {
 						SharedTransition.finishState(transition.id);
 						transition.sharedElements = null;
 						transitionContext.completeTransition(true);
-						SharedTransition.events().notify({
+						SharedTransition.events().notify<SharedTransitionEventData>({
 							eventName: SharedTransition.finishedEvent,
-							object: fromObject({
+							data: {
 								id: transition?.id,
 								type,
 								action: 'dismiss',
-							}),
+							},
 						});
 					};
 
@@ -435,14 +435,14 @@ export class SharedTransitionHelper {
 		});
 	}
 
-	static interactiveStart(state: SharedTransitionState, interactiveState: PlatformSharedInteractiveState, type: SharedTransitionType) {
-		SharedTransition.events().notify({
+	static interactiveStart(state: SharedTransitionState, interactiveState: PlatformTransitionInteractiveState, type: TransitionNavigationType) {
+		SharedTransition.events().notify<SharedTransitionEventData>({
 			eventName: SharedTransition.startedEvent,
-			object: fromObject({
+			data: {
 				id: state?.instance?.id,
 				type,
 				action: 'interactiveStart',
-			}),
+			},
 		});
 		switch (type) {
 			case 'page':
@@ -451,7 +451,7 @@ export class SharedTransitionHelper {
 		}
 	}
 
-	static interactiveUpdate(state: SharedTransitionState, interactiveState: PlatformSharedInteractiveState, type: SharedTransitionType, percent: number) {
+	static interactiveUpdate(state: SharedTransitionState, interactiveState: PlatformTransitionInteractiveState, type: TransitionNavigationType, percent: number) {
 		if (!interactiveState?.added) {
 			interactiveState.added = true;
 			for (const p of state.instance.sharedElements.presented) {
@@ -477,12 +477,20 @@ export class SharedTransitionHelper {
 			});
 		}
 		interactiveState.propertyAnimator.fractionComplete = percent;
+		SharedTransition.events().notify<SharedTransitionEventData>({
+			eventName: SharedTransition.interactiveUpdateEvent,
+			data: {
+				id: state?.instance?.id,
+				type,
+				percent,
+			},
+		});
 	}
 
-	static interactiveCancel(state: SharedTransitionState, interactiveState: PlatformSharedInteractiveState, type: SharedTransitionType) {
+	static interactiveCancel(state: SharedTransitionState, interactiveState: PlatformTransitionInteractiveState, type: TransitionNavigationType) {
 		if (state?.instance && interactiveState?.added && interactiveState?.propertyAnimator) {
 			interactiveState.propertyAnimator.reversed = true;
-			const duration = isNumber(state.pageStart?.duration) ? state.pageStart?.duration / 1000 : 0.35;
+			const duration = isNumber(state.pageEnd?.duration) ? state.pageEnd?.duration / 1000 : 0.35;
 			interactiveState.propertyAnimator.continueAnimationWithTimingParametersDurationFactor(null, duration);
 			setTimeout(() => {
 				for (const p of state.instance.sharedElements.presented) {
@@ -496,19 +504,18 @@ export class SharedTransitionHelper {
 				interactiveState.added = false;
 				interactiveState.transitionContext.cancelInteractiveTransition();
 				interactiveState.transitionContext.completeTransition(false);
-				SharedTransition.events().notify({
-					eventName: SharedTransition.cancelledEvent,
-					object: fromObject({
+				SharedTransition.events().notify<SharedTransitionEventData>({
+					eventName: SharedTransition.interactiveCancelledEvent,
+					data: {
 						id: state?.instance?.id,
 						type,
-						action: 'interactiveCancel',
-					}),
+					},
 				});
 			}, duration * 1000);
 		}
 	}
 
-	static interactiveFinish(state: SharedTransitionState, interactiveState: PlatformSharedInteractiveState, type: SharedTransitionType) {
+	static interactiveFinish(state: SharedTransitionState, interactiveState: PlatformTransitionInteractiveState, type: TransitionNavigationType) {
 		if (state?.instance && interactiveState?.added && interactiveState?.propertyAnimator) {
 			interactiveState.propertyAnimator.reversed = false;
 
@@ -525,13 +532,13 @@ export class SharedTransitionHelper {
 				interactiveState.added = false;
 				interactiveState.transitionContext.finishInteractiveTransition();
 				interactiveState.transitionContext.completeTransition(true);
-				SharedTransition.events().notify({
+				SharedTransition.events().notify<SharedTransitionEventData>({
 					eventName: SharedTransition.finishedEvent,
-					object: fromObject({
+					data: {
 						id: state?.instance?.id,
 						type,
 						action: 'interactiveFinish',
-					}),
+					},
 				});
 			}, duration * 1000);
 		}
diff --git a/packages/core/ui/transition/shared-transition.ts b/packages/core/ui/transition/shared-transition.ts
index b0e85425a..dbbf04e81 100644
--- a/packages/core/ui/transition/shared-transition.ts
+++ b/packages/core/ui/transition/shared-transition.ts
@@ -1,4 +1,4 @@
-import type { Transition } from '.';
+import type { Transition, TransitionNavigationType } from '.';
 import { Observable } from '../../data/observable';
 import { Screen } from '../../platform';
 import { isNumber } from '../../utils/types';
@@ -19,6 +19,37 @@ export enum SharedTransitionAnimationType {
 	present,
 	dismiss,
 }
+type SharedTransitionEventAction = 'present' | 'dismiss' | 'interactiveStart' | 'interactiveFinish';
+export type SharedTransitionEventData = { eventName: string; data: { id: number; type: TransitionNavigationType; action?: SharedTransitionEventAction; percent?: number } };
+export type SharedRect = { x?: number; y?: number; width?: number; height?: number };
+export type SharedProperties = SharedRect & { opacity?: number; scale?: { x?: number; y?: number } };
+export type SharedSpringProperties = {
+	tension?: number;
+	friction?: number;
+	mass?: number;
+	delay?: number;
+	velocity?: number;
+	animateOptions?: any /* ios only: UIViewAnimationOptions */;
+};
+type SharedTransitionPageProperties = SharedProperties & {
+	/**
+	 * (iOS Only) Allow "independent" elements found only on one of the screens to take part in the animation.
+	 * Note: This feature will be brought to Android in a future release.
+	 */
+	sharedTransitionTags?: { [key: string]: SharedProperties };
+	/**
+	 * Spring animation settings.
+	 * Defaults to 140 tension with 10 friction.
+	 */
+	spring?: SharedSpringProperties;
+};
+type SharedTransitionPageWithDurationProperties = SharedTransitionPageProperties & {
+	/**
+	 * Linear duration in milliseconds
+	 * Note: When this is defined, it will override spring options and use only linear animation.
+	 */
+	duration?: number;
+};
 export interface SharedTransitionInteractiveOptions {
 	/**
 	 * When the pan exceeds this percentage and you let go, finish the transition.
@@ -35,10 +66,6 @@ export interface SharedTransitionInteractiveOptions {
 	percentFormula?: (eventData: PanGestureEventData) => number;
 }
 export interface SharedTransitionConfig {
-	/**
-	 * Preconfigured transition or your own custom configured one.
-	 */
-	instance?: Transition;
 	/**
 	 * Interactive transition settings. (iOS only at the moment)
 	 */
@@ -50,57 +77,45 @@ export interface SharedTransitionConfig {
 		dismiss?: SharedTransitionInteractiveOptions;
 	};
 	/**
-	 * View settings to start your transition.
+	 * View settings to start your transition with.
 	 */
 	pageStart?: SharedTransitionPageProperties;
 	/**
-	 * View settings to end your transition.
+	 * View settings to end your transition with.
 	 */
-	pageEnd?: SharedTransitionPageProperties;
+	pageEnd?: SharedTransitionPageWithDurationProperties;
 	/**
-	 * View settings to end your transition for the 'from' (aka outgoing or dismissed) page.
+	 * View settings to return to the original page with.
 	 */
-	pageReturn?: SharedTransitionPageProperties;
+	pageReturn?: SharedTransitionPageWithDurationProperties;
 }
 export interface SharedTransitionState extends SharedTransitionConfig {
+	/**
+	 * (Internally used) Preconfigured transition or your own custom configured one.
+	 */
+	instance?: Transition;
 	/**
 	 * Page which will start the transition.
 	 */
 	page?: ViewBase;
 	activeType?: SharedTransitionAnimationType;
 	toPage?: ViewBase;
-	// used internally for determining interactive gesture state of the transition
+	/**
+	 * Whether interactive transition has began.
+	 */
 	interactiveBegan?: boolean;
+	/**
+	 * Whether interactive transition was cancelled.
+	 */
 	interactiveCancelled?: boolean;
 }
-export type SharedRect = { x?: number; y?: number; width?: number; height?: number };
-export type SharedProperties = SharedRect & { opacity?: number; scale?: { x?: number; y?: number } };
-export type SharedSpringProperties = {
-	tension?: number;
-	friction?: number;
-	mass?: number;
-	delay?: number;
-	velocity?: number;
-	animateOptions?: any /* ios only: UIViewAnimationOptions */;
-};
-type SharedTransitionPageProperties = SharedProperties & {
-	/**
-	 * Linear duration in milliseconds
-	 * Note: When this is defined, it will override spring options and use only linear animation.
-	 */
-	duration?: number;
-	/**
-	 * (iOS Only) Allow "independent" elements found only on one of the screens to take part in the animation.
-	 * Note: This feature will be brought to Android in a future release.
-	 */
-	sharedTransitionTags?: { [key: string]: SharedProperties };
-	/**
-	 * Spring animation settings.
-	 * Defaults to 140 tension with 10 friction.
-	 */
-	spring?: SharedSpringProperties;
-};
-let sharedTransitionEvents: Observable;
+class SharedTransitionObservable extends Observable {
+	// @ts-ignore
+	on(eventNames: string, callback: (data: SharedTransitionEventData) => void, thisArg?: any) {
+		super.on(eventNames, <any>callback, thisArg);
+	}
+}
+let sharedTransitionEvents: SharedTransitionObservable;
 let currentStack: Array<SharedTransitionState>;
 /**
  * Shared Element Transitions (preview)
@@ -126,22 +141,41 @@ export class SharedTransition {
 		}
 		return { instance: transition };
 	}
-	static events() {
+	/**
+	 * Listen to various shared element transition events.
+	 * @returns Observable
+	 */
+	static events(): SharedTransitionObservable {
 		if (!sharedTransitionEvents) {
-			sharedTransitionEvents = new Observable();
+			sharedTransitionEvents = new SharedTransitionObservable();
 		}
 		return sharedTransitionEvents;
 	}
+	/**
+	 * When the transition starts.
+	 */
 	static startedEvent = 'SharedTransitionStartedEvent';
+	/**
+	 * When the transition finishes.
+	 */
 	static finishedEvent = 'SharedTransitionFinishedEvent';
-	static cancelledEvent = 'SharedTransitionCancelledEvent';
+	/**
+	 * When the interactive transition cancels.
+	 */
+	static interactiveCancelledEvent = 'SharedTransitionInteractiveCancelledEvent';
+	/**
+	 * When the interactive transition updates with the percent value.
+	 */
+	static interactiveUpdateEvent = 'SharedTransitionInteractiveUpdateEvent';
 
 	/**
 	 * Enable to see various console logging output of Shared Element Transition behavior.
 	 */
 	static DEBUG = false;
 	/**
-	 * @private
+	 * Update transition state.
+	 * @param id Transition instance id
+	 * @param state SharedTransitionState
 	 */
 	static updateState(id: number, state: SharedTransitionState) {
 		if (!currentStack) {
@@ -159,13 +193,15 @@ export class SharedTransition {
 		}
 	}
 	/**
-	 * @private
+	 * Get current state for any transition.
+	 * @param id Transition instance id
 	 */
 	static getState(id: number) {
 		return currentStack?.find((t) => t.instance?.id === id);
 	}
 	/**
-	 * @private
+	 * Finish transition state.
+	 * @param id Transition instance id
 	 */
 	static finishState(id: number) {
 		const index = currentStack?.findIndex((t) => t.instance?.id === id);
@@ -188,11 +224,11 @@ export class SharedTransition {
 		presenting: Array<View>;
 	} {
 		// 1. Presented view: gather all sharedTransitionTag views
-		const presentedSharedElements = <Array<View>>querySelectorAll(toPage, 'sharedTransitionTag');
+		const presentedSharedElements = <Array<View>>querySelectorAll(toPage, 'sharedTransitionTag').filter((v) => !v.sharedTransitionIgnore);
 		// console.log('presented sharedTransitionTag total:', presentedSharedElements.length);
 
 		// 2. Presenting view: gather all sharedTransitionTag views
-		const presentingSharedElements = <Array<View>>querySelectorAll(fromPage, 'sharedTransitionTag');
+		const presentingSharedElements = <Array<View>>querySelectorAll(fromPage, 'sharedTransitionTag').filter((v) => !v.sharedTransitionIgnore);
 		// console.log(
 		// 	'presenting sharedTransitionTags:',
 		// 	presentingSharedElements.map((v) => v.sharedTransitionTag)
@@ -247,10 +283,10 @@ export function getSpringFromProps(props: SharedSpringProperties) {
 
 /**
  * Page starting defaults for provided type.
- * @param type 'page' | 'modal'
+ * @param type TransitionNavigationType
  * @returns { x,y,width,height }
  */
-export function getPageStartDefaultsForType(type: 'page' | 'modal') {
+export function getPageStartDefaultsForType(type: TransitionNavigationType) {
 	return {
 		x: type === 'page' ? Screen.mainScreen.widthDIPs : 0,
 		y: type === 'page' ? 0 : Screen.mainScreen.heightDIPs,