Fixed shared element layout shift bug

Author: absurdprofit

example/src/App.tsx

@@ -16,7 +16,7 @@ function App() {
         page_load_transition: false,
         animation: {
           type: "zoom",
-          duration: 200,
+          duration: 300,
         }
       }}>
         <Stack.Screen

example/src/Components/Tile.tsx

@@ -10,7 +10,9 @@ export default class Tile extends React.Component<TileProps> {
     render() {
         return (
             <div onClick={this.props.onClick} className="tile">
-                <SharedElement id={this.props.hero.id}>
+                <SharedElement id={this.props.hero.id} config={{
+                    duration: 200
+                }}>
                     <img src={this.props.hero.photo} alt={this.props.hero.name} />
                 </SharedElement>
             </div>

example/src/Screens/Details.tsx

@@ -28,7 +28,7 @@ export default function Details(props: DetailsProps) {
                             easing_function: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
                         },
                         y: {
-                            duration: 200,
+                            duration: 250,
                             easing_function: 'ease-out'
                         }
                     }} id={props.route.params.profile.id}>

src/GhostLayer.tsx

@@ -46,9 +46,14 @@ export default class GhostLayer extends React.Component<GhostLayerProps, GhostLa
                     const start_instance = current_scene.nodes[id].instance;
                     start_instance.hidden = true;
                     end_instance.hidden = true;
+
+                    
                     const start_node = current_scene.nodes[id].node;
                     const end_node = next_scene.nodes[id].node;
 
+                    start_node.style.display = 'unset';
+                    end_node.style.display = 'unset';
+
                     const x_duration: number = end_instance.props.config?.x?.duration || end_instance.props.config?.duration || this.props.animation.duration;
                     const y_duration: number = end_instance.props.config?.y?.duration || end_instance.props.config?.duration || this.props.animation.duration;
 

src/SharedElement.tsx

@@ -39,9 +39,18 @@ namespace SharedElement {
         "ease-out"
     }
 
+    enum TransitionAnimationEnum {
+        "move",
+        "fade-in",
+        "fade-out",
+        "cross-fade"
+    }
+
+    type TransitionAnimation = keyof typeof TransitionAnimationEnum;
+
     type EasingFunctionKeyword = keyof typeof EasingFunctionKeywordEnum;
 
-    type EasingFunction = EasingFunctionKeyword | `cubic-bezier(${number}, ${number}, ${number}, ${number})`;
+    type EasingFunction = EasingFunctionKeyword | string;
 
     type TransformOriginGlobal = keyof typeof TransformOriginGlobalEnum;
 
@@ -58,16 +67,17 @@ namespace SharedElement {
 
     interface SharedElementConfig {
         transform_origin?: TransformOrigin;
-        easing_function?: EasingFunction,
-        duration?: number,
+        easing_function?: EasingFunction;
+        duration?: number;
+        animation?: TransitionAnimation;
         x?: {
             duration?: number;
             easing_function?: EasingFunction
-        }
+        };
         y?: {
             duration?: number;
             easing_function?: EasingFunction
-        }
+        };
     }
 
 
@@ -254,7 +264,15 @@ namespace SharedElement {
                     {(scene) => {
                         this._scene = scene;
                         return (
-                            <div ref={this.set_ref.bind(this)} id={`shared-element-${this._id}`} className={"shared-element"} style={{opacity: this._hidden ? '0': '1'}}>
+                            <div
+                                ref={this.set_ref.bind(this)}
+                                id={`shared-element-${this._id}`}
+                                className={"shared-element"}
+                                style={{
+                                    display: this._hidden ? 'block' : 'contents',
+                                    opacity: this._hidden ? '0': '1'
+                                }
+                            }>
                                 {this.props.children}
                             </div>
                         );

src/css/Transition.css

@@ -109,10 +109,6 @@ html, body {
 .screen-content {
   overflow: scroll;
 }
-.shared-element {
-  width: 100%;
-  height: 100%;
-}
 #ghost-layer {
   position: absolute;
   z-index: 100000;