Make expandable animation slightly less rapid

harvard-lil · Dec 5, 2024 · 7f79357 · 7f79357
1 parent ff059bb
commit 7f79357
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
@@ -442,7 +442,7 @@ lil-header.expanded .nav-menu__inner {
   border-radius: 36px;
   border: 1.5px solid #121212;
   position: relative;
-  transition: transform calc(300ms * var(--animation-rate)) ease;
+  transition: transform calc(500ms * var(--animation-rate)) ease;
 }
 
 .expandable__icon span {
@@ -453,27 +453,27 @@ lil-header.expanded .nav-menu__inner {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  transition: transform calc(300ms * var(--animation-rate)) ease;
+  transition: transform calc(500ms * var(--animation-rate)) ease;
 }
 
 .expandable__icon span:nth-child(1) {
   transform: translate(-50%, -50%) rotate(90deg);
-  transition: transform calc(300ms * var(--animation-rate)) ease;
+  transition: transform calc(500ms * var(--animation-rate)) ease;
 }
 
 .expandable__toggle:hover .expandable__icon {
   transform: rotate(90deg);
-  transition: transform calc(300ms * var(--animation-rate)) ease;
+  transition: transform calc(500ms * var(--animation-rate)) ease;
 }
 
 .expandable.expanded .expandable__icon {
   transform: rotate(90deg);
-  transition: transform calc(300ms * var(--animation-rate)) ease;
+  transition: transform calc(500ms * var(--animation-rate)) ease;
 }
 
 .expandable.expanded .expandable__icon span:nth-child(2) {
   transform: translate(-50%, -50%) rotate(-90deg);
-  transition: transform calc(300ms * var(--animation-rate)) ease;
+  transition: transform calc(500ms * var(--animation-rate)) ease;
 }
 
 .expandable__content {

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
@@ -282,7 +282,7 @@ class LilHeader extends HTMLElement {
             y: -40,
         })
 
-        gsap.to(this.menu, {duration: safeDuration(0.6 * animationRate), display: 'none'})
+        gsap.to(this.menu, {duration: safeDuration(1 * animationRate), display: 'none'})
     }
 }
 
@@ -345,7 +345,7 @@ class LilExpandable extends HTMLElement {
     openExpandableContent() {
         this.content.style.display = 'block';
         gsap.to(this.content, {
-            duration: safeDuration(0.6 * animationRate),
+            duration: safeDuration(1 * animationRate),
             ease: 'power4.inOut',
             height: this.content.scrollHeight,
             opacity: 1,
@@ -354,13 +354,13 @@ class LilExpandable extends HTMLElement {
 
     closeExpandableContent() {
         gsap.to(this.content, {
-            duration: safeDuration(0.6 * animationRate),
+            duration: safeDuration(1 * animationRate),
             ease: 'power4.inOut',
             height: 0,
             opacity: 0,
         })
         gsap.to(this.content, {
-            duration: safeDuration(0.6 * animationRate),
+            duration: safeDuration(1 * animationRate),
             ease: 'power4.inOut',
             display: 'none',
         })