tideshift/tideshift-website
1
0
Fork 0
Code Activity

feat: implement prefers reduced motion for anims

Browse Source
This commit is contained in:
Michael Rieger
2026-03-09 11:45:34 +01:00
parent 9bfae3bcee
commit c1e9c5b127
10 changed files with 473 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.astro
+15 -10
View File
@@ -148,15 +148,20 @@ function getCurrentYear() {
const footer = document.querySelector("footer");
if (footer) {
gsap.from(footer, {
scrollTrigger: {
trigger: footer,
start: "top bottom",
},
duration: 2,
opacity: 0,
yPercent: 10,
ease: "expo.out",
const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
gsap.from(footer, {
scrollTrigger: {
trigger: footer,
start: "top bottom",
},
duration: 2,
opacity: 0,
yPercent: 10,
// yPercent: 10,
ease: "expo.out",
});
});
}
</script>
</script>
src/components/Header.astro
+11 -7
View File
@@ -82,14 +82,18 @@ import SkipNavLink from "./SkipNavLink.astro";
const header = document.querySelector("header");
if (header) {
const tl = gsap.timeline();
const mm = gsap.matchMedia();
tl.from(header.children, {
duration: 1,
yPercent: -120,
opacity: 0,
stagger: 0.2,
ease: "expo.out",
mm.add("(prefers-reduced-motion: no-preference)", () => {
const tl = gsap.timeline();
tl.from(header.children, {
duration: 1,
yPercent: -120,
opacity: 0,
stagger: 0.2,
ease: "expo.out",
});
});
}
</script>
src/components/landing/AboutSection.astro
+80 -76
View File
@@ -122,87 +122,91 @@ import { Picture } from "astro:assets";
const aboutSection = document.querySelector(".about");
if (aboutSection) {
const tl = gsap.timeline({
scrollTrigger: {
trigger: aboutSection,
start: "top 70%",
},
});
const mm = gsap.matchMedia();
tl.addLabel("heading", 0);
tl.addLabel("heading-text", 0.6);
tl.addLabel("image", 0.8);
tl.addLabel("image-text", 1.1);
mm.add("(prefers-reduced-motion: no-preference)", () => {
const tl = gsap.timeline({
scrollTrigger: {
trigger: aboutSection,
start: "top 70%",
},
});
new SplitText(aboutSection.querySelector("h2"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
tl.from(
self.chars,
{
duration: 0.9,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
},
"heading",
);
},
});
tl.addLabel("heading", 0);
tl.addLabel("heading-text", 0.6);
tl.addLabel("image", 0.8);
tl.addLabel("image-text", 1.1);
new SplitText(aboutSection.querySelectorAll(".heading p"), {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
tl.from(
self.lines,
{
duration: 0.9,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
onComplete: () => self.revert(),
},
"heading-text",
);
},
});
new SplitText(aboutSection.querySelector("h2"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
tl.from(
self.chars,
{
duration: 0.9,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
},
"heading",
);
},
});
tl.from(
aboutSection.querySelector(".background"),
{
duration: 2,
opacity: 0,
ease: "expo.out",
},
"image",
);
new SplitText(aboutSection.querySelectorAll(".heading p"), {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
tl.from(
self.lines,
{
duration: 0.9,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
onComplete: () => self.revert(),
},
"heading-text",
);
},
});
new SplitText(aboutSection.querySelectorAll(".image > p"), {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
tl.from(
self.lines,
{
duration: 0.9,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
onComplete: () => self.revert(),
},
"image-text",
);
},
tl.from(
aboutSection.querySelector(".background"),
{
duration: 2,
opacity: 0,
ease: "expo.out",
},
"image",
);
new SplitText(aboutSection.querySelectorAll(".image > p"), {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
tl.from(
self.lines,
{
duration: 0.9,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
onComplete: () => self.revert(),
},
"image-text",
);
},
});
});
}
</script>
src/components/landing/ContactSection.astro
+88 -84
View File
@@ -104,100 +104,104 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
const contactSection = document.querySelector(".contact");
if (contactSection) {
const tl = gsap.timeline({
scrollTrigger: {
trigger: contactSection,
start: "top 60%",
},
});
const mm = gsap.matchMedia();
tl.addLabel("image", 0.2);
tl.addLabel("heading", 0.5);
tl.addLabel("text", 0.6);
tl.addLabel("arrow", 0.6);
mm.add("(prefers-reduced-motion: no-preference)", () => {
const tl = gsap.timeline({
scrollTrigger: {
trigger: contactSection,
start: "top 60%",
},
});
new SplitText(contactSection.querySelector("h2"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
tl.from(
self.chars,
{
tl.addLabel("image", 0.2);
tl.addLabel("heading", 0.5);
tl.addLabel("text", 0.6);
tl.addLabel("arrow", 0.6);
new SplitText(contactSection.querySelector("h2"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
tl.from(
self.chars,
{
duration: 0.9,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
},
"heading",
);
},
});
new SplitText(contactSection.querySelector("p"), {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
tl.from(
self.lines,
{
duration: 0.9,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
onComplete: () => self.revert(),
},
"text",
);
},
});
tl.from(
contactSection.querySelector(".image"),
{
duration: 2,
opacity: 0,
xPercent: -10,
ease: "expo.out",
},
"image",
);
new SplitText(contactSection.querySelector("a"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
gsap.from(self.chars, {
scrollTrigger: {
trigger: contactSection,
start: "top 50%",
},
duration: 0.9,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
},
"heading",
);
},
});
});
},
});
new SplitText(contactSection.querySelector("p"), {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
tl.from(
self.lines,
{
duration: 0.9,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
onComplete: () => self.revert(),
},
"text",
);
},
});
tl.from(
contactSection.querySelector(".image"),
{
duration: 2,
opacity: 0,
xPercent: -10,
ease: "expo.out",
},
"image",
);
new SplitText(contactSection.querySelector("a"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
gsap.from(self.chars, {
scrollTrigger: {
trigger: contactSection,
start: "top 50%",
},
duration: 0.9,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
tl.from(
contactSection.querySelector("a > svg"),
{
duration: 1,
opacity: 0,
yPercent: -10,
ease: "expo.out",
onComplete: () => self.revert(),
});
},
},
"arrow",
);
});
tl.from(
contactSection.querySelector("a > svg"),
{
duration: 1,
opacity: 0,
yPercent: -10,
ease: "expo.out",
},
"arrow",
);
}
</script>
src/components/landing/HeroSection.astro
+69 -65
View File
@@ -125,74 +125,78 @@ import ArrowDown from "../icons/ArrowDown.astro";
const heroSection = document.querySelector(".hero");
if (heroSection) {
const tl = gsap.timeline().pause();
const mm = gsap.matchMedia();
tl.addLabel("heading", 0);
tl.addLabel("image", 0.2);
tl.addLabel("text", 0.8);
tl.addLabel("arrow", 1.5);
mm.add("(prefers-reduced-motion: no-preference)", () => {
const tl = gsap.timeline().pause();
tl.from(
heroSection.querySelector(".image"),
{
duration: 2,
opacity: 0,
xPercent: 10,
ease: "expo.out",
},
"image",
);
tl.addLabel("heading", 0);
tl.addLabel("image", 0.2);
tl.addLabel("text", 0.8);
tl.addLabel("arrow", 1.5);
new SplitText(heroSection.querySelector("h1"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
tl.from(
self.chars,
{
duration: 1,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
},
"heading",
);
},
tl.from(
heroSection.querySelector(".image"),
{
duration: 2,
opacity: 0,
xPercent: 10,
ease: "expo.out",
},
"image",
);
new SplitText(heroSection.querySelector("h1"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
tl.from(
self.chars,
{
duration: 1,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
},
"heading",
);
},
});
new SplitText(heroSection.querySelector("p"), {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
tl.from(
self.lines,
{
duration: 0.9,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
onComplete: () => self.revert(),
},
"text",
).play();
},
});
tl.from(
heroSection.querySelector(".down"),
{
duration: 1,
opacity: 0,
translateY: "-100%",
ease: "bounce.out",
},
"arrow",
);
});
new SplitText(heroSection.querySelector("p"), {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
tl.from(
self.lines,
{
duration: 0.9,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
onComplete: () => self.revert(),
},
"text",
).play();
},
});
tl.from(
heroSection.querySelector(".down"),
{
duration: 1,
opacity: 0,
translateY: "-100%",
ease: "bounce.out",
},
"arrow",
);
}
</script>
src/components/landing/ServicesSection.astro
+66 -62
View File
@@ -110,68 +110,72 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
const servicesSection = document.querySelector(".services");
if (servicesSection) {
const tl = gsap.timeline({
scrollTrigger: {
trigger: servicesSection,
start: "top 60%",
},
const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
const tl = gsap.timeline({
scrollTrigger: {
trigger: servicesSection,
start: "top 60%",
},
});
tl.addLabel("heading", 0);
tl.addLabel("text", 0.3);
tl.addLabel("cards", 0.5);
new SplitText(servicesSection.querySelector("h2"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
tl.from(
self.chars,
{
duration: 1,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
},
"heading",
);
},
});
new SplitText(servicesSection.querySelector("p"), {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
tl.from(
self.lines,
{
duration: 1.5,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
onComplete: () => self.revert(),
},
"text",
);
},
});
tl.from(
servicesSection.querySelectorAll(".cards > *"),
{
duration: 1,
opacity: 0,
yPercent: 5,
stagger: 0.15,
ease: "expo.out",
},
"cards",
);
});
tl.addLabel("heading", 0);
tl.addLabel("text", 0.3);
tl.addLabel("cards", 0.5);
new SplitText(servicesSection.querySelector("h2"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
tl.from(
self.chars,
{
duration: 1,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
},
"heading",
);
},
});
new SplitText(servicesSection.querySelector("p"), {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
tl.from(
self.lines,
{
duration: 1.5,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
onComplete: () => self.revert(),
},
"text",
);
},
});
tl.from(
servicesSection.querySelectorAll(".cards > *"),
{
duration: 1,
opacity: 0,
yPercent: 5,
stagger: 0.15,
ease: "expo.out",
},
"cards",
);
}
</script>
src/components/landing/ValuesSection.astro
+90 -86
View File
@@ -113,101 +113,105 @@ function formatIndex(index: number) {
const valuesSection = document.querySelector(".values");
if (valuesSection) {
const heading = valuesSection.querySelector("h2");
const mm = gsap.matchMedia();
new SplitText(heading, {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
gsap.from(self.chars, {
mm.add("(prefers-reduced-motion: no-preference)", () => {
const heading = valuesSection.querySelector("h2");
new SplitText(heading, {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
gsap.from(self.chars, {
scrollTrigger: {
trigger: heading,
start: "top 70%",
},
duration: 0.9,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
});
},
});
const items = valuesSection.querySelectorAll("li");
items.forEach((item) => {
const itemTl = gsap.timeline({
scrollTrigger: {
trigger: heading,
trigger: item,
start: "top 70%",
},
duration: 0.9,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
});
},
});
const items = valuesSection.querySelectorAll("li");
itemTl.addLabel("number", 0);
itemTl.addLabel("heading", 0.2);
itemTl.addLabel("text", 0.5);
items.forEach((item) => {
const itemTl = gsap.timeline({
scrollTrigger: {
trigger: item,
start: "top 70%",
},
});
new SplitText(item.querySelector("span"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
itemTl.from(
self.chars,
{
duration: 0.9,
yPercent: -120,
stagger: 0.25,
ease: "expo.out",
onComplete: () => self.revert(),
},
"number",
);
},
});
itemTl.addLabel("number", 0);
itemTl.addLabel("heading", 0.2);
itemTl.addLabel("text", 0.5);
new SplitText(item.querySelector("h3"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
itemTl.from(
self.chars,
{
duration: 0.9,
yPercent: -120,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
},
"heading",
);
},
});
new SplitText(item.querySelector("span"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
itemTl.from(
self.chars,
{
duration: 0.9,
yPercent: -120,
stagger: 0.25,
ease: "expo.out",
onComplete: () => self.revert(),
},
"number",
);
},
});
new SplitText(item.querySelector("h3"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
itemTl.from(
self.chars,
{
duration: 0.9,
yPercent: -120,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
},
"heading",
);
},
});
new SplitText(item.querySelector("p"), {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
itemTl.from(
self.lines,
{
duration: 0.9,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
onComplete: () => self.revert(),
},
"text",
);
},
new SplitText(item.querySelector("p"), {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
itemTl.from(
self.lines,
{
duration: 0.9,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
onComplete: () => self.revert(),
},
"text",
);
},
});
});
});
}
src/pages/imprint.astro
+27 -23
View File
@@ -63,30 +63,34 @@ import BaseLayout from "../layouts/BaseLayout.astro";
const page = document.querySelector(".imprint");
if (page) {
new SplitText(page.querySelector("h1"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
gsap.from(self.chars, {
duration: 1,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
});
},
});
const mm = gsap.matchMedia();
gsap.from(page.querySelectorAll(":scope > div"), {
duration: 1,
delay: 0.3,
opacity: 0,
yPercent: -20,
ease: "expo.out",
stagger: 0.1,
mm.add("(prefers-reduced-motion: no-preference)", () => {
new SplitText(page.querySelector("h1"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
gsap.from(self.chars, {
duration: 1,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
});
},
});
gsap.from(page.querySelectorAll(":scope > div"), {
duration: 1,
delay: 0.3,
opacity: 0,
yPercent: -20,
ease: "expo.out",
stagger: 0.1,
});
});
}
</script>
src/pages/old/blog.astro
-20
View File
@@ -1,20 +0,0 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
const allPosts = Object.values(
import.meta.glob("./posts/*.md", { eager: true }),
);
const pageTitle = "My Astro Learning Blog";
---
<BaseLayout pageTitle={pageTitle}>
<p>This is where I will post about my journey learning Astro.</p>
<ul>
{
allPosts.map((post: any) => (
<li>
<a href={post.url}>{post.frontmatter.title}</a>
</li>
))
}
</ul>
</BaseLayout>
src/pages/privacy.astro
+27 -23
View File
@@ -134,30 +134,34 @@ import BaseLayout from "../layouts/BaseLayout.astro";
const page = document.querySelector(".privacy");
if (page) {
new SplitText(page.querySelector("h1"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
gsap.from(self.chars, {
duration: 1,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
});
},
});
const mm = gsap.matchMedia();
gsap.from(page.querySelectorAll(".content > *"), {
duration: 1,
delay: 0.3,
opacity: 0,
yPercent: -20,
ease: "expo.out",
stagger: 0.1,
mm.add("(prefers-reduced-motion: no-preference)", () => {
new SplitText(page.querySelector("h1"), {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
gsap.from(self.chars, {
duration: 1,
yPercent: -120,
scale: 1.2,
stagger: 0.015,
ease: "expo.out",
onComplete: () => self.revert(),
});
},
});
gsap.from(page.querySelectorAll(".content > *"), {
duration: 1,
delay: 0.3,
opacity: 0,
yPercent: -20,
ease: "expo.out",
stagger: 0.1,
});
});
}
</script>