Fine-tune the slideIn animation (#2499)

* Fine-tune the slideIn animation. * Adjust speed of the animation. * Use cubic-bezier easing. * Slow down the animation very slightly.
Shopify · Apr 11, 2023 · f4cd8a1 · f4cd8a1
1 parent 61a862d
commit f4cd8a1
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -746,7 +746,7 @@ details > * {
   --duration-default: 200ms;
   --duration-long: 500ms;
   --duration-extra-long: 600ms;
-  --animation-slide-in: slideIn var(--duration-extra-long) ease-out forwards;
+  --animation-slide-in: slideIn var(--duration-extra-long) cubic-bezier(0,0,.3,1) forwards;
 }
 
 .underlined-link,
@@ -3289,7 +3289,7 @@ details-disclosure > details {
 
   .scroll-trigger--active.animate--slide-in {
     animation: var(--animation-slide-in);
-    animation-delay: calc(var(--animation-order) * 100ms);
+    animation-delay: calc(var(--animation-order) * 75ms);
   }
 
   /* Turn off animations if JS is turned off. */
@@ -3301,7 +3301,7 @@ details-disclosure > details {
 
   @keyframes slideIn {
     from {
-      transform: translateY(10vh);
+      transform: translateY(2rem);
       opacity: 0;
     }
     to {