Skip to content

Commit

Permalink
Merge pull request #644 from cmsetzer/tweak-expandable-animation-rate
Browse files Browse the repository at this point in the history 
Ensure consistent animation rate across expandable elements
  • Loading branch information
@bensteinberg
bensteinberg authored Dec 6, 2024
2 parents 75daf5a + 7f79357 commit e5c3dfd
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 36 deletions.
42 changes: 21 additions & 21 deletions app/assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ strong {
html {
scrollbar-gutter: stable;

/* Be sure to also set animationSpeed in main.js so it matches this */
--animation-speed: 0.3;
/* Be sure to also set variable animationRate in main.js so it matches this value */
--animation-rate: 0.3;
}

.nav-container {
Expand Down Expand Up @@ -107,8 +107,8 @@ lil-header.expanded .logo {
so adding some drop shadow to the logo is the next best thing to handle
cases where the window is short, the menu is scrolled, and menu items
overlap the logo */
transition: filter calc(0.1s * var(--animation-speed)) ease;
transition-delay: calc(1s * var(--animation-speed));
transition: filter calc(0.1s * var(--animation-rate)) ease;
transition-delay: calc(1s * var(--animation-rate));
filter: drop-shadow(6px 6px 6px rgba(0, 0, 0, 0.6));
}

Expand All @@ -129,13 +129,13 @@ lil-header.expanded .logo {
@apply bg-black;
height: 4px;
left: 0;
transition: background-color calc(300ms * var(--animation-speed)) ease calc(400ms * var(--animation-speed)), transform calc(300ms * var(--animation-speed)) ease;
transition: background-color calc(300ms * var(--animation-rate)) ease calc(400ms * var(--animation-rate)), transform calc(300ms * var(--animation-rate)) ease;
}

lil-header.expanded .menu-button__bar {
transform: translateY(-50%) rotate(45deg);
background-color: white;
transition: background-color calc(300ms * var(--animation-speed)) ease calc(300ms * var(--animation-speed)), transform calc(300ms * var(--animation-speed)) ease;
transition: background-color calc(300ms * var(--animation-rate)) ease calc(300ms * var(--animation-rate)), transform calc(300ms * var(--animation-rate)) ease;
}

.menu-button__bar:nth-child(2) {
Expand All @@ -147,8 +147,8 @@ lil-header.expanded .menu-button .menu-button__bar:nth-child(2) {
}

lil-header svg {
transition: color calc(300ms * var(--animation-speed)) ease;
transition-delay: calc(400ms * var(--animation-speed));
transition: color calc(300ms * var(--animation-rate)) ease;
transition-delay: calc(400ms * var(--animation-rate));
color: #121212;
}

Expand All @@ -158,8 +158,8 @@ lil-header a:hover svg {

lil-header.expanded svg {
color: white;
transition: color calc(300ms * var(--animation-speed)) ease;
transition-delay: calc(300ms * var(--animation-speed));
transition: color calc(300ms * var(--animation-rate)) ease;
transition-delay: calc(300ms * var(--animation-rate));
}

.nav-menu {
Expand All @@ -171,7 +171,7 @@ lil-header.expanded svg {
top: 0;
bottom: 0;
clip-path: inset(0 0 100% 0);
transition: clip-path calc(0.3s * var(--animation-speed)) ease-out, opacity calc(0.3s * var(--animation-speed)) ease-out;
transition: clip-path calc(0.3s * var(--animation-rate)) ease-out, opacity calc(0.3s * var(--animation-rate)) ease-out;
overflow: auto;
z-index: 1;
}
Expand Down Expand Up @@ -212,18 +212,18 @@ lil-header.expanded svg {
z-index: 0;
opacity: 0;
visibility: hidden;
transition: opacity calc(500ms * var(--animation-speed)) ease calc(300ms * var(--animation-speed)), visibility calc(500ms * var(--animation-speed)) ease calc(300ms * var(--animation-speed));
transition: opacity calc(500ms * var(--animation-rate)) ease calc(300ms * var(--animation-rate)), visibility calc(500ms * var(--animation-rate)) ease calc(300ms * var(--animation-rate));
}

lil-header.expanded .nav-menu__overlay {
opacity: 1;
visibility: visible;
transition: opacity calc(500ms * var(--animation-speed)) ease calc(300ms * var(--animation-speed)), visibility calc(500ms * var(--animation-speed)) ease calc(300ms * var(--animation-speed));
transition: opacity calc(500ms * var(--animation-rate)) ease calc(300ms * var(--animation-rate)), visibility calc(500ms * var(--animation-rate)) ease calc(300ms * var(--animation-rate));
}

lil-header.expanded .nav-menu__inner {
display: flex;
transition: display calc(500ms * var(--animation-speed)) ease calc(300ms * var(--animation-speed))
transition: display calc(500ms * var(--animation-rate)) ease calc(300ms * var(--animation-rate))
}

/*.interactive-link {
Expand Down Expand Up @@ -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-speed)) ease;
transition: transform calc(500ms * var(--animation-rate)) ease;
}

.expandable__icon span {
Expand All @@ -453,27 +453,27 @@ lil-header.expanded .nav-menu__inner {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform calc(300ms * var(--animation-speed)) 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-speed)) ease;
transition: transform calc(500ms * var(--animation-rate)) ease;
}

.expandable__toggle:hover .expandable__icon {
transform: rotate(90deg);
transition: transform calc(300ms * var(--animation-speed)) ease;
transition: transform calc(500ms * var(--animation-rate)) ease;
}

.expandable.expanded .expandable__icon {
transform: rotate(90deg);
transition: transform calc(300ms * var(--animation-speed)) 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-speed)) ease;
transition: transform calc(500ms * var(--animation-rate)) ease;
}

.expandable__content {
Expand All @@ -493,7 +493,7 @@ lil-header.expanded .nav-menu__inner {
}

html.is-changing .transition-main {
transition: opacity calc(350ms * var(--animation-speed)) ease-in-out;
transition: opacity calc(350ms * var(--animation-rate)) ease-in-out;
}

html.is-animating .transition-main {
Expand Down
30 changes: 15 additions & 15 deletions app/assets/javascripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);

// Be sure to also set variable --animation-rate in main.css so it matches this value
const animationRate = 0.3;

function setVh() {
const setValue = () => {
var vh = window.innerHeight * 0.01;
Expand Down Expand Up @@ -156,9 +159,6 @@ class LilHeader extends HTMLElement {
constructor() {
super();

// Be sure to also set --animation-speed in main.css so it matches this
this.animationSpeed = 0.3;

this.expanded = false;
this.menuButton = this.querySelector('.menu-button');
this.overlay = this.querySelector('.nav-menu__overlay');
Expand Down Expand Up @@ -226,7 +226,7 @@ class LilHeader extends HTMLElement {
gsap.to(this.menu, {duration: 0, display: 'flex'})

gsap.to(this.menu, {
duration: safeDuration(0.95 * this.animationSpeed),
duration: safeDuration(0.95 * animationRate),
ease: 'expo.inOut',
clipPath: 'inset(0% 0% 0% 0%)',
})
Expand All @@ -235,7 +235,7 @@ class LilHeader extends HTMLElement {
opacity: 0,
y: -80,
}, {
duration: safeDuration(1.2 * this.animationSpeed),
duration: safeDuration(1.2 * animationRate),
ease: 'power3.out',
opacity: 1,
y: 0,
Expand All @@ -246,17 +246,17 @@ class LilHeader extends HTMLElement {
opacity: 0,
y: -10,
}, {
duration: safeDuration(1 * this.animationSpeed),
duration: safeDuration(1 * animationRate),
ease: 'power3.out',
opacity: 1,
delay: 0.55 * this.animationSpeed,
delay: 0.55 * animationRate,
y: 0,
})
}

menuCloseAnimation() {
gsap.to(this.menu, {
duration: safeDuration(0.8 * this.animationSpeed),
duration: safeDuration(0.8 * animationRate),
ease: 'expo.inOut',
clipPath: 'inset(0% 0% 100% 0%)',
})
Expand All @@ -265,7 +265,7 @@ class LilHeader extends HTMLElement {
opacity: 1,
y: 0,
}, {
duration: safeDuration(0.4 * this.animationSpeed),
duration: safeDuration(0.4 * animationRate),
ease: 'power3.in',
opacity: 0,
y: -30,
Expand All @@ -276,13 +276,13 @@ class LilHeader extends HTMLElement {
opacity: 1,
y: 0,
}, {
duration: safeDuration(0.4 * this.animationSpeed),
duration: safeDuration(0.4 * animationRate),
ease: 'power3.in',
opacity: 0,
y: -40,
})

gsap.to(this.menu, {duration: safeDuration(0.6 * this.animationSpeed), display: 'none'})
gsap.to(this.menu, {duration: safeDuration(1 * animationRate), display: 'none'})
}
}

Expand All @@ -295,7 +295,7 @@ class LilMarquee extends HTMLElement {
}

animate() {
gsap?.to(this.parts, {xPercent: -100, repeat: -1, duration: safeDuration(60), ease: "linear"}).totalProgress(0.5);
gsap?.to(this.parts, {xPercent: -100, repeat: -1, duration: safeDuration(60 * animationRate), ease: "linear"}).totalProgress(0.5);
gsap?.set(this.inner, {xPercent: -50});
}
}
Expand Down Expand Up @@ -345,7 +345,7 @@ class LilExpandable extends HTMLElement {
openExpandableContent() {
this.content.style.display = 'block';
gsap.to(this.content, {
duration: safeDuration(0.6),
duration: safeDuration(1 * animationRate),
ease: 'power4.inOut',
height: this.content.scrollHeight,
opacity: 1,
Expand All @@ -354,13 +354,13 @@ class LilExpandable extends HTMLElement {

closeExpandableContent() {
gsap.to(this.content, {
duration: safeDuration(0.6),
duration: safeDuration(1 * animationRate),
ease: 'power4.inOut',
height: 0,
opacity: 0,
})
gsap.to(this.content, {
duration: safeDuration(0.6),
duration: safeDuration(1 * animationRate),
ease: 'power4.inOut',
display: 'none',
})
Expand Down

0 comments on commit e5c3dfd

Please sign in to comment.