livephoto: make animation less annoying

Signed-off-by: Varun Patil <varunpatil@ucla.edu>
pulsejet · Mar 15, 2023 · 1ef3f57 · 1ef3f57
1 parent dab5757
commit 1ef3f57
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 12 deletions.
diff --git a/src/components/frame/Photo.vue b/src/components/frame/Photo.vue
@@ -405,7 +405,7 @@ div.img-outer {
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     user-select: none;
-    transition: border-radius 0.1s ease-in, var(--livephoto-img-transition);
+    transition: border-radius 0.1s ease-in;
 
     .p-outer.placeholder > & {
       display: none;

diff --git a/src/global.scss b/src/global.scss
@@ -57,9 +57,6 @@ body.has-viewer header {
 }
 
 // Live Photo transitions
-:root {
-  --livephoto-img-transition: opacity 0.4s linear, transform 0.3s ease-in-out;
-}
 .memories-livephoto {
   position: relative;
   overflow: hidden;
@@ -73,20 +70,16 @@ body.has-viewer header {
     width: 100%;
     height: 100%;
     display: block;
-    transition: var(--livephoto-img-transition);
+    z-index: 1;
   }
-
-  video,
-  &.playing.canplay img {
+  video {
     opacity: 0;
+    z-index: 2;
+    transition: opacity 0.3s ease-in-out;
   }
-  img,
   &.playing.canplay video {
     opacity: 1;
   }
-  &.playing.canplay img {
-    transform: scale(1.05);
-  }
 }
 
 // Hide scrollbar