diff --git a/apps/toolbox/src/pages/transitions.xml b/apps/toolbox/src/pages/transitions.xml
index 3f81958b8..ade477f7b 100644
--- a/apps/toolbox/src/pages/transitions.xml
+++ b/apps/toolbox/src/pages/transitions.xml
@@ -12,12 +12,15 @@
 
     <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="Open Modal" sharedTransitionTag="open-modal-label" class="text-center" />
-      <ContentView row="2" sharedTransitionTag="open-modal-box" marginTop="20" width="50" height="50" borderRadius="25" backgroundColor="purple" />
+      <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="25" backgroundColor="purple" />
       <ContentView row="3" sharedTransitionTag="open-modal-box2" marginTop="20" width="15" height="15" borderRadius="7" backgroundColor="orange" />
       <ContentView row="3" sharedTransitionTag="open-modal-box3" marginTop="20" width="15" height="15" borderRadius="7" backgroundColor="red" horizontalAlignment="left" marginLeft="100" />
       <ContentView row="4" sharedTransitionTag="open-modal-box4" marginTop="20" width="15" height="15" borderRadius="7" backgroundColor="pink" horizontalAlignment="right" marginRight="100" />
     </GridLayout>
 
+		<ContentView sharedTransitionTag="astronaut" rowSpan="4" translateY="600" opacity="0" isUserInteractionEnabled="false" />
+
   </GridLayout>
 </Page>
diff --git a/apps/toolbox/src/pages/transitions/transitions-detail.xml b/apps/toolbox/src/pages/transitions/transitions-detail.xml
index 843b00f05..1edad65a7 100644
--- a/apps/toolbox/src/pages/transitions/transitions-detail.xml
+++ b/apps/toolbox/src/pages/transitions/transitions-detail.xml
@@ -4,7 +4,16 @@
     </ActionBar>
   </Page.actionBar>
 
-  <GridLayout rows="*" columns="auto,*" verticalAlignment="top">
-    <Image row="0" sharedTransitionTag="image" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" width="100%" />
+  <GridLayout rows="auto,auto,*" columns="*" verticalAlignment="top">
+    <Image row="1" sharedTransitionTag="image-modal" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" height="230" verticalAlignment="top" marginTop="10" />
+
+    <GridLayout row="2" rows="auto,auto,auto">
+      <Label text="Opened Modal" verticalAlignment="top" marginTop="20" class="text-center" fontSize="28" color="black" />
+
+      <ContentView row="2" sharedTransitionTag="open-modal-box1" marginTop="20" width="200" height="200" borderRadius="100" backgroundColor="purple" />
+      <ContentView row="1" sharedTransitionTag="open-modal-box2" marginTop="20" width="75" height="75" borderRadius="37" backgroundColor="orange" />
+      <ContentView row="2" sharedTransitionTag="open-modal-box3" marginTop="20" width="30" height="30" borderRadius="15" backgroundColor="red" horizontalAlignment="right" marginRight="50" />
+      <ContentView row="1" sharedTransitionTag="open-modal-box4" marginTop="20" width="30" height="30" borderRadius="15" backgroundColor="pink" horizontalAlignment="left" marginLeft="50" />
+    </GridLayout>
   </GridLayout>
 </Page>
diff --git a/packages/core/ui/frame/fragment.transitions.android.ts b/packages/core/ui/frame/fragment.transitions.android.ts
index 40dcf5fcf..665942390 100644
--- a/packages/core/ui/frame/fragment.transitions.android.ts
+++ b/packages/core/ui/frame/fragment.transitions.android.ts
@@ -169,6 +169,9 @@ export function _setAndroidFragmentTransitions(animated: boolean, navigationTran
 		}
 	}
 
+	// @ts-ignore
+	transition?.test?.(fragmentTransaction, currentEntry, newEntry);
+
 	printTransitions(currentEntry);
 	printTransitions(newEntry);
 }
diff --git a/packages/core/ui/transition/modal-transition.android.ts b/packages/core/ui/transition/modal-transition.android.ts
index daf502524..2744ae235 100644
--- a/packages/core/ui/transition/modal-transition.android.ts
+++ b/packages/core/ui/transition/modal-transition.android.ts
@@ -1,3 +1,78 @@
+import { BackstackEntry } from '../frame';
+import { View } from '../core/view';
 import { Transition } from '.';
+import { querySelectorAll } from '../core/view-base';
 
-export class ModalTransition extends Transition {}
+export class ModalTransition extends Transition {
+	createAndroidAnimator(transitionType: string) {
+		console.log('HELLO', transitionType);
+	}
+
+	test(fragmentTransaction: androidx.fragment.app.FragmentTransaction, currentEntry: BackstackEntry, newEntry: BackstackEntry) {
+		console.log('HELLO', fragmentTransaction);
+
+		const fromPage = currentEntry.resolvedPage;
+		const toPage = newEntry.resolvedPage;
+
+		const currentFragment: androidx.fragment.app.Fragment = currentEntry ? currentEntry.fragment : null;
+		const newFragment: androidx.fragment.app.Fragment = newEntry.fragment;
+
+		// 1. Presented view: gather all sharedTransitionTag views
+		const presentedSharedElements = <Array<View>>querySelectorAll(toPage, 'sharedTransitionTag');
+		// console.log('presented sharedTransitionTag total:', presentedSharedElements.length);
+
+		// 2. Presenting view: gather all sharedTransitionTag views
+		const presentingSharedElements = <Array<View>>querySelectorAll(fromPage, 'sharedTransitionTag');
+		// console.log('presenting sharedTransitionTag total:', presentingSharedElements.length);
+
+		// 3. only handle sharedTransitionTag on presenting which match presented
+		const presentedTags = presentedSharedElements.map((v) => v.sharedTransitionTag);
+		const presentingViewsToHandle = presentingSharedElements.filter((v) => presentedTags.includes(v.sharedTransitionTag));
+		// fragmentTransaction.addSharedElement();
+
+		toPage.on('loaded', () => {
+			presentedSharedElements.forEach((v) => {
+				console.log({
+					presentedSharedElements: true,
+					nativeView: !!v.nativeView,
+					sharedTransitionTag: v.sharedTransitionTag,
+				});
+				androidx.core.view.ViewCompat.setTransitionName(v.nativeView, v.sharedTransitionTag);
+			});
+
+			// setTimeout(() => {
+			newFragment.startPostponedEnterTransition();
+			// }, 2000)
+		});
+
+		presentingSharedElements.forEach((v) => {
+			console.log({
+				presentingSharedElements: true,
+				nativeView: !!v.nativeView,
+				sharedTransitionTag: v.sharedTransitionTag,
+			});
+			androidx.core.view.ViewCompat.setTransitionName(v.nativeView, v.sharedTransitionTag);
+		});
+		presentingSharedElements.forEach((v) => {
+			fragmentTransaction.addSharedElement(v.nativeView, v.sharedTransitionTag);
+		});
+
+		fragmentTransaction.setReorderingAllowed(true);
+
+		const transitionSet = new androidx.transition.TransitionSet();
+		transitionSet.setDuration(2000);
+		transitionSet.addTransition(new androidx.transition.ChangeBounds());
+		transitionSet.addTransition(new androidx.transition.ChangeTransform());
+		// transitionSet.addTransition(new androidx.transition.ChangeClipBounds());
+
+		// postpone enter until we call "loaded" on the new page
+		newFragment.postponeEnterTransition();
+
+		newFragment.setSharedElementEnterTransition(transitionSet);
+		newFragment.setSharedElementReturnTransition(transitionSet);
+
+		// newFragment.setSharedElementReturnTransition(new androidx.transition.ChangeBounds());
+		// currentFragment.setSharedElementEnterTransition(new androidx.transition.ChangeBounds());
+		// currentFragment.setSharedElementReturnTransition(new androidx.transition.ChangeBounds());
+	}
+}