Fix scroll position bug

absurdprofit · absurdprofit · commit 30bb68adaaea · 2021-12-23T15:49:03.000-05:00
diff --git a/example/public/index.html b/example/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Declarative routing library for React ⚛ with page transitions and animations. Under Development 🧪. Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>React Motion Router</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/example/src/Components/Navbar.tsx b/example/src/Components/Navbar.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import IconButton from '@mui/material/IconButton';
-import {Navigation} from 'react-motion-router';
 import '../css/Navbar.css';
 
 interface NavbarProps {
diff --git a/example/src/Screens/Cards.tsx b/example/src/Screens/Cards.tsx
@@ -20,7 +20,7 @@ export default function Cards(props: CardsProps) {
             {
                 Heroes.map((hero: Hero, index) => {
                     return (
-                        <ButtonBase onClick={() => props.navigation.navigate('/details', {
+                        <ButtonBase key={index} onClick={() => props.navigation.navigate('/details', {
                             profile: hero
                         })}>
                             <Card sx={{ width: 345 }}>
@@ -36,13 +36,7 @@ export default function Cards(props: CardsProps) {
                                     <SharedElement id={`title-${hero.id}`}>
                                         <Typography gutterBottom variant="h5" component="h5">{hero.name}</Typography>
                                     </SharedElement>
-                                    {
-                                        hero.description ?
-                                        <SharedElement id={`desc-${hero.id}`}>
-                                            <p>{hero.description}</p>
-                                        </SharedElement>
-                                        : undefined
-                                    }
+                                    <p>{hero.description}</p>
                                 </CardContent>
                             </Card>
                         </ButtonBase>
diff --git a/example/src/Screens/Details.tsx b/example/src/Screens/Details.tsx
@@ -38,9 +38,7 @@ export default function Details(props: DetailsProps) {
                         <SharedElement id={`title-${props.route.params.profile.id}`}>
                             <h1>{props.route.params.profile.name}</h1>
                         </SharedElement>
-                        <SharedElement id={`desc-${props.route.params.profile.id}`}>
-                            <p>{props.route.params.profile.description}</p>
-                        </SharedElement>
+                        <p>{props.route.params.profile.description}</p>
                     </div>
                 </div>
             </div>
diff --git a/example/src/Screens/Slides.tsx b/example/src/Screens/Slides.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import { Heroes, Hero } from '../assets/Heroes';
+import { Heroes } from '../assets/Heroes';
 import ClearIcon from '@mui/icons-material/Clear';
 import { Navigation, SharedElement } from 'react-motion-router';
 import IconButton from '@mui/material/IconButton';
diff --git a/example/src/css/Details.css b/example/src/css/Details.css
@@ -26,4 +26,18 @@
     text-align: justify;
     line-height: 1.5rem;
     height: 100%;
+}
+.details .text-content p {
+    animation: slide-up 300ms ease-out;
+}
+
+@keyframes slide-up {
+    from {
+        opacity: 0;
+        transform: translateY(15px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0px);
+    }
 }
