Skip to content

Improve mobile scroll animations by disabling scrub behavior #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Katotodan wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

Improve mobile scroll animations by disabling scrub behavior #161

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 27 additions & 20 deletions static/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
// Register Plugin
gsap.registerPlugin(ScrollTrigger);

// Responsive animation config
let isMobile = window.matchMedia("(max-width: 768px)").matches;

const SCRUB = isMobile ? false : 1;

// 1. Header Timeline
let tl = gsap.timeline({
defaults: { ease: "power4.out" }
Expand Down Expand Up @@ -73,7 +78,8 @@ const scrubEach = (elements, props, triggerEl, startBase, endBase, offsetPer) =>
trigger: triggerEl,
start: 'top ' + (startBase - i * offsetPer) + '%',
end: 'top ' + (endBase - i * offsetPer) + '%',
scrub: 1,
toggleActions: isMobile ? "play none none none" : undefined,
scrub: SCRUB,
}
}));
});
Expand Down Expand Up @@ -192,7 +198,7 @@ const initScrollPieces = () => {
trigger: triggerEl,
start: 'top 85%',
end: 'top 50%',
scrub: 1,
scrub: SCRUB,
}
});

Expand Down Expand Up @@ -220,7 +226,8 @@ const initScrollPieces = () => {
start: 'top 80%',
endTrigger: '.browser',
end: 'top 40%',
scrub: 2,
toggleActions: isMobile ? "play none none none" : undefined,
scrub: isMobile ? false : 2,
}
});
journeyTriggers.push(journey.scrollTrigger);
Expand Down Expand Up @@ -370,15 +377,15 @@ const initScrollAnimations = () => {

gsap.to('.scroll-orb--1', {
y: '-60vh', x: '15vw', scale: 1.4, opacity: 0.5,
scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: 2 }
scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: isMobile ? false : 2 }
});
gsap.to('.scroll-orb--2', {
y: '-40vh', x: '-20vw', scale: 0.8,
scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: 3 }
scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: isMobile ? false : 3 }
});
gsap.to('.scroll-orb--3', {
y: '-80vh', x: '10vw', scale: 1.2, opacity: 0.7,
scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: 2.5 }
scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: isMobile ? false : 2.5 }
});

// ── Scroll Logo Pieces Journey ──
Expand All @@ -401,7 +408,7 @@ const initScrollAnimations = () => {
trigger: wrapper,
start: 'bottom 30%', // recession begins when bottom of hero reaches 60% viewport
end: 'bottom top',
scrub: 1,
scrub: SCRUB,
}
});
}
Expand All @@ -411,7 +418,7 @@ const initScrollAnimations = () => {
if (customersSection) {
gsap.from('.customers-title', {
y: 30, opacity: 0,
scrollTrigger: { trigger: customersSection, start: 'top 90%', end: 'top 55%', scrub: 1 }
scrollTrigger: { trigger: customersSection, start: 'top 90%', end: 'top 55%', scrub: SCRUB }
});
}

Expand All @@ -420,19 +427,19 @@ const initScrollAnimations = () => {
if (heroSection) {
gsap.from('.hero-badge', {
y: 40, opacity: 0,
scrollTrigger: { trigger: heroSection, start: 'top 90%', end: 'top 50%', scrub: 1 }
scrollTrigger: { trigger: heroSection, start: 'top 90%', end: 'top 50%', scrub: SCRUB }
});
gsap.from('.hero-title', {
y: 80, opacity: 0,
scrollTrigger: { trigger: heroSection, start: 'top 88%', end: 'top 40%', scrub: 1 }
scrollTrigger: { trigger: heroSection, start: 'top 88%', end: 'top 40%', scrub: SCRUB }
});
gsap.from('.hero-subtitle', {
y: 100, opacity: 0,
scrollTrigger: { trigger: heroSection, start: 'top 85%', end: 'top 35%', scrub: 1 }
scrollTrigger: { trigger: heroSection, start: 'top 85%', end: 'top 35%', scrub: SCRUB }
});
gsap.from('.hero-actions', {
y: 60, opacity: 0,
scrollTrigger: { trigger: heroSection, start: 'top 80%', end: 'top 35%', scrub: 1 }
scrollTrigger: { trigger: heroSection, start: 'top 80%', end: 'top 35%', scrub: SCRUB }
});

const statItems = heroSection.querySelectorAll('.stat-item');
Expand All @@ -450,7 +457,7 @@ const initScrollAnimations = () => {
// Recession — only after scrolling well past
gsap.to(heroSection, {
opacity: 0.4, y: -30,
scrollTrigger: { trigger: heroSection, start: 'bottom 10%', end: 'bottom top', scrub: 1 }
scrollTrigger: { trigger: heroSection, start: 'bottom 10%', end: 'bottom top', scrub: SCRUB }
});
}

Expand All @@ -459,14 +466,14 @@ const initScrollAnimations = () => {
if (demoSection) {
gsap.from('.demo-header', {
y: 50, opacity: 0,
scrollTrigger: { trigger: demoSection, start: 'top 88%', end: 'top 50%', scrub: 1 }
scrollTrigger: { trigger: demoSection, start: 'top 88%', end: 'top 50%', scrub: SCRUB }
});

const demoContainer = document.querySelector('.demo-container');
if (demoContainer) {
gsap.from(demoContainer, {
scale: 0.88, opacity: 0, y: 60,
scrollTrigger: { trigger: demoContainer, start: 'top 90%', end: 'top 35%', scrub: 1 }
scrollTrigger: { trigger: demoContainer, start: 'top 90%', end: 'top 35%', scrub: SCRUB }
});
}

Expand All @@ -477,7 +484,7 @@ const initScrollAnimations = () => {

gsap.to(demoSection, {
opacity: 0.5, y: -20,
scrollTrigger: { trigger: demoSection, start: 'bottom 40%', end: 'bottom top', scrub: 1 }
scrollTrigger: { trigger: demoSection, start: 'bottom 40%', end: 'bottom top', scrub: SCRUB }
});
}

Expand All @@ -500,7 +507,7 @@ const initScrollAnimations = () => {
if (ctaBox) {
gsap.from(ctaBox, {
y: 40, opacity: 0, scale: 0.96,
scrollTrigger: { trigger: ctaBox, start: 'top 90%', end: 'top 55%', scrub: 1 }
scrollTrigger: { trigger: ctaBox, start: 'top 90%', end: 'top 55%', scrub: SCRUB }
});
}
}
Expand All @@ -527,15 +534,15 @@ const initScrollAnimations = () => {
if (browserShell) {
gsap.from(browserShell, {
scale: 0.82, opacity: 0, y: 80,
scrollTrigger: { trigger: '.browser', start: 'top 90%', end: 'top 30%', scrub: 1 }
scrollTrigger: { trigger: '.browser', start: 'top 90%', end: 'top 30%', scrub: SCRUB }
});
}

const browserStand = document.querySelector('.browser-stand');
if (browserStand) {
gsap.from(browserStand, {
scaleX: 0.5, opacity: 0,
scrollTrigger: { trigger: browserStand, start: 'top 95%', end: 'top 65%', scrub: 1 }
scrollTrigger: { trigger: browserStand, start: 'top 95%', end: 'top 65%', scrub: SCRUB }
});
}

Expand All @@ -553,7 +560,7 @@ const initScrollAnimations = () => {

gsap.from(divider, {
opacity: 0, scaleX: 0.3,
scrollTrigger: { trigger: divider, start: 'top 90%', end: 'top 70%', scrub: 1 }
scrollTrigger: { trigger: divider, start: 'top 90%', end: 'top 70%', scrub: SCRUB }
});
});
};
Expand Down
Loading