Update: Opening from horizontal animation

dist/plex-meets-homeassistant.js

@@ -22925,6 +22925,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
             }
             else {
                 const top = this.getTop();
+                movieElemLocal.style.transition = '0s';
+                movieElemLocal.style.left = `${movieElemLocal.offsetLeft - this.content.scrollLeft}px`;
+                movieElemLocal.style.top = `${movieElemLocal.offsetTop}px`;
+                movieElemLocal.style.position = 'absolute';
+                movieElemLocal.style.zIndex = '3';
+                setTimeout(() => {
+                    movieElemLocal.style.transition = '0.5s';
                     this.showDetails(this.activeMovieElemData);
                     this.showBackground();
                     if (lodash.isEqual(movieElem.style.width, movieElem.style.height)) {
@@ -22935,12 +22942,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                         movieElemLocal.style.width = `${this.minExpandedWidth}px`;
                         movieElemLocal.style.height = `${this.minExpandedHeight}px`;
                     }
-                movieElemLocal.style.position = 'absolute';
-                movieElemLocal.style.zIndex = '3';
                     movieElemLocal.style.left = '16px';
                     movieElemLocal.style.top = `${top + 16}px`;
                     movieElemLocal.dataset.clicked = 'true';
                     this.activeMovieElem = movieElemLocal;
+                }, 1);
             }
         };
         this.getTop = () => {

src/plex-meets-homeassistant.ts

@@ -1723,6 +1723,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 			this.hideBackground();
 		} else {
 			const top = this.getTop();
+
+			movieElemLocal.style.transition = '0s';
+			movieElemLocal.style.left = `${movieElemLocal.offsetLeft - this.content.scrollLeft}px`;
+			movieElemLocal.style.top = `${movieElemLocal.offsetTop}px`;
+			movieElemLocal.style.position = 'absolute';
+			movieElemLocal.style.zIndex = '3';
+			setTimeout(() => {
+				movieElemLocal.style.transition = '0.5s';
+
 				this.showDetails(this.activeMovieElemData);
 				this.showBackground();
 				if (_.isEqual(movieElem.style.width, movieElem.style.height)) {
@@ -1732,12 +1741,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 					movieElemLocal.style.width = `${this.minExpandedWidth}px`;
 					movieElemLocal.style.height = `${this.minExpandedHeight}px`;
 				}
-			movieElemLocal.style.position = 'absolute';
+
-			movieElemLocal.style.zIndex = '3';
 				movieElemLocal.style.left = '16px';
 				movieElemLocal.style.top = `${top + 16}px`;
+
 				movieElemLocal.dataset.clicked = 'true';
 				this.activeMovieElem = movieElemLocal;
+			}, 1);
 		}
 	};