Fixed zoom animation bug

Author: absurdprofit

example/src/App.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {Router, Stack} from 'react-motion-router';
 import Home from './Screens/Home';
 import Details from './Screens/Details';
-import Post from './Screens/Post';
 import Tiles from './Screens/Tiles';
 import Slides from './Screens/Slides';
 import Cards from './Screens/Cards';
@@ -15,8 +14,7 @@ function App() {
     <div className="App">
       <Router config={{
         defaultRoute: '/',
-        pageLoadTransition: false,
-        disableDiscovery: !disableBrowserRouting,
+        disableDiscovery: false,
         disableBrowserRouting: disableBrowserRouting,
         animation: {
             type: "slide",
@@ -42,11 +40,6 @@ function App() {
           path={"/"}
           component={Home}
         />
-        <Stack.Screen
-          path={"/post"}
-          component={Post}
-          defaultParams={{data: "Default"}}
-        />
         <Stack.Screen
           path={"/tiles"}
           component={Tiles}

example/src/Screens/Post.tsx

@@ -3,109 +3,4 @@
 * {
     margin: 0;
     font-family: 'Roboto', sans-serif;
-}
-
-.profile-card {
-    width: max-content;
-    padding: 15px;
-    display: flex;
-    gap: 15px;
-    border-radius: 5px;
-    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-    margin: 15px;
-
-}
-.profile-card:hover, .post-card:hover {
-    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
-}
-.profile-description {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    max-width: 150px;
-}
-.profile-description p {
-    width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-.profile-card img {
-    width: 64px;
-    height: 64px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-.profile-info {
-    display: flex;
-    flex-direction: column;
-    max-width: 100vw;
-    overflow-x: hidden;
-}
-.profile-info img {
-    width: 100%;
-    max-width: 1000px;
-    height: auto;
-    border-radius: 0;
-    object-fit: cover;
-}
-.post-card {
-    width: 250px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    border-radius: 5px;
-    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-    margin: 15px;
-    padding-top: 5px;
-}
-.post-card img {
-    width: 100%;
-    height: auto;
-}
-
-.post-card .post-description {
-    height: 150px;
-    padding: 15px;
-    padding-top: 0;
-}
-.post-card .post-description p {
-    height: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-.post {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    gap: 15px;
-}
-.post .picture {
-    width: 100%;
-}
-.post .picture img {
-    width: 100%;
-    object-fit: cover;
-}
-.post .text {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-}
-
-.post .text p {
-    animation: slide-up 400ms ease-out;
-}
-
-@keyframes slide-up {
-    from {
-        opacity: 0;
-        transform: translateY(100%);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0px);
-    }
-}
+}

example/src/assets/Posts.ts

@@ -6,17 +6,6 @@
     top: 0;
     z-index: 1;
 }
-@keyframes fade-in {
-    from {
-        opacity: 0;
-        transform: translateY(-30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0px);
-    }
-}
-
 .details .text-content {
     padding: 15px;
 }
@@ -46,4 +35,20 @@
     width: calc(100vw - 30px);
     display: flex;
     justify-content: center;
+}
+.details .profile-info {
+    align-items: center;
+}
+.profile-info {
+    display: flex;
+    flex-direction: column;
+    max-width: 100vw;
+    overflow-x: hidden;
+}
+.profile-info img {
+    width: 100%;
+    max-width: 1000px;
+    height: auto;
+    border-radius: 0;
+    object-fit: cover;
 }

example/src/assets/Profiles.ts

@@ -410,10 +410,10 @@ export class AnimationProvider extends React.Component<AnimationProviderProps, A
         if (this._animationLayerData?.gestureNavigating && this.props.out) {
             gestureEndState = AnimationKeyframePresets[this.outAnimation as keyof typeof AnimationKeyframePresets][0];
         }
-        
         return (
             <div className="animation-provider" ref={this.setRef} style={{
                 position: 'absolute',
+                transformOrigin: 'center center',
                 pointerEvents: this.state.pointerEvents,
                 zIndex: this.props.in && !this.props.backNavigating ? 1 : this.props.out && this.props.backNavigating ? 1 : 0,
                 ...gestureEndState // so the "old" nextScreen doesn't snap back to centre

example/src/css/App.css

@@ -132,41 +132,41 @@ const Presets = {
     ],
     "zoom-in-in": [
         {
-            transform: 'scale(0.85)',
-            opacity: 1
+            transform: 'scale(0.85) translate(7.5vw, 7.5vh)',
+            opacity: 0
         },
         {
-            transform: 'scale(1)',
+            transform: 'scale(1) translate(0vw, 0vh)',
             opacity: 1
         }
     ],
     "zoom-in-out": [
         {
-            transform: 'scale(1)',
+            transform: 'scale(1) translate(0vw, 0vh)',
             opacity: 1
         },
         {
-            transform: 'scale(1.15)',
+            transform: 'scale(1.15) translate(-7.5vw, -7.5vh)',
             opacity: 0
         }
     ],
     "zoom-out-in": [
         {
-            transform: 'scale(1.15)',
+            transform: 'scale(1.15) translate(-7.5vw, -7.5vh)',
             opacity: 0
         },
         {
-            transform: 'scale(1)',
+            transform: 'scale(1) translate(0vw, 0vh)',
             opacity: 1
         }
     ],
     "zoom-out-out": [
         {
-            transform: 'scale(1)',
+            transform: 'scale(1) translate(0vw, 0vh)',
             opacity: 1
         },
         {
-            transform: 'scale(0.85)',
+            transform: 'scale(0.85) translate(7.5vw, 7.5vh)',
             opacity: 0
         }
     ],

example/src/css/Details.css

@@ -34,7 +34,6 @@ interface Config {
         in: AnimationConfig;
         out?: AnimationConfig;
     } | AnimationConfig;
-    pageLoadTransition?: boolean;
     defaultRoute?: string;
     swipeAreaWidth?: number;
     minFlingVelocity?: number;