tideshift/tideshift-website
1
0
Fork 0
Code Activity

refactor: create animation helper functions to disable anims on webkit

Browse Source
This commit is contained in:
Michael Rieger
2026-03-25 12:53:03 +01:00
parent 4166a51c6c
commit 85e36e1d46
18 changed files with 603 additions and 729 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -12,7 +12,7 @@
"@astrojs/partytown": "^2.1.5",
"@astrojs/sitemap": "^3.7.1",
"@astrolib/seo": "1.0.0-beta.8",
"astro": "^6.0.2",
"astro": "^6.0.8",
"astro-robots-txt": "^1.0.0",
"gsap": "^3.14.2"
}
pnpm-lock.yaml
Generated
+300 -300
View File
File diff suppressed because it is too large Load Diff
src/components/Footer.astro
+12 -15
View File
@@ -66,7 +66,7 @@ function getCurrentYear() {
<span class="made">Made with ❤️ in Vienna.</span>
<div class="no-ai">All content made by humans.</div>
<div class="no-ai">Code and content made by humans.</div>
</div>
{/* Logo, commented out because of gradient issues */}
@@ -146,6 +146,7 @@ function getCurrentYear() {
}
@media screen and (max-width: 44.9375rem) {
text-align: center;
margin-top: 5rem;
}
}
@@ -159,11 +160,7 @@ function getCurrentYear() {
<script>
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(SplitText);
gsap.registerPlugin(ScrollTrigger);
import { customAnimate } from "../scripts/animations";
const footer = document.querySelector("footer");
@@ -171,16 +168,16 @@ function getCurrentYear() {
const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
gsap.from(footer, {
scrollTrigger: {
trigger: footer,
// start: "top bottom",
customAnimate({
target: footer,
animationProps: {
scrollTrigger: {
trigger: footer,
},
duration: 2,
opacity: 0,
yPercent: 10,
},
duration: 2,
opacity: 0,
yPercent: 10,
// yPercent: 10,
ease: "expo.out",
});
});
}
src/components/GlobalScripts.astro
+8
View File
@@ -0,0 +1,8 @@
<script>
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(SplitText);
gsap.registerPlugin(ScrollTrigger);
</script>
src/components/GlobalStyles.astro
+5 -1
View File
@@ -38,7 +38,7 @@
--tracking-narrow: -0.09375rem;
--base-grid: repeat(12, 1fr);
--max-content-width: 1600px;
--max-content-width: 112.5rem;
--padding-x: 1.5rem;
@media screen and (min-width: 50rem) {
@@ -94,4 +94,8 @@
border-radius: 0.25rem;
border: 2px solid var(--clr-ts-red-400);
}
.char, .line {
will-change: transform, opacity;
}
</style>
src/components/Header.astro
+15 -16
View File
@@ -8,12 +8,15 @@ import SkipNavLink from "./SkipNavLink.astro";
<SkipNavLink contentId="main-content" />
{/* Logo */}
<a class="header-logo" href="/">
<a class="header-logo" href="/" aria-label="Tideshift Logo">
<Logo class="logo" />
</a>
{/* Contact Link */}
<a class="header-contact plausible-event-name=Header+Contact" href="mailto:office@tideshiftdigital.com">
<a
class="header-contact plausible-event-name=Header+Contact"
href="mailto:office@tideshiftdigital.com"
>
<span class="heading-gradient">Contact us</span>
<ArrowUpRight class="icon char" />
</a>
@@ -48,7 +51,7 @@ import SkipNavLink from "./SkipNavLink.astro";
.logo {
width: 8rem;
transform: translate3d(-0.75rem, 0, 0);
@media screen and (min-width: 35rem) {
grid-column: 1 / 3;
width: 12.5rem;
@@ -86,11 +89,7 @@ import SkipNavLink from "./SkipNavLink.astro";
<script>
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(SplitText);
gsap.registerPlugin(ScrollTrigger);
import { customAnimate } from "../scripts/animations";
const header = document.querySelector("header");
@@ -98,14 +97,14 @@ import SkipNavLink from "./SkipNavLink.astro";
const mm = gsap.matchMedia();
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",
customAnimate({
target: header,
animationProps: {
duration: 1,
yPercent: -60,
opacity: 0,
stagger: 0.2,
},
});
});
}
src/components/landing/AboutSection.astro
+25 -69
View File
@@ -86,6 +86,7 @@ import { Picture } from "astro:assets";
> p {
margin-top: 1.5rem;
will-change: opacity, transform;
@media screen and (max-width: 63.9375rem) {
max-width: 52ch;
@@ -130,6 +131,7 @@ import { Picture } from "astro:assets";
font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
line-height: var(--leading-paragraph);
z-index: 1;
will-change: opacity, transform;
@media screen and (max-width: 63.9375rem) {
padding: 3rem;
@@ -140,11 +142,11 @@ import { Picture } from "astro:assets";
<script>
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(SplitText);
gsap.registerPlugin(ScrollTrigger);
import {
animateHeading,
animateText,
customAnimate,
} from "../../scripts/animations";
const aboutSection = document.querySelector(".about");
@@ -164,75 +166,29 @@ import { Picture } from "astro:assets";
tl.addLabel("image", 0.8);
tl.addLabel("image-text", 1.1);
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",
);
},
animateHeading({
target: aboutSection.querySelector("h2"),
timeline: tl,
label: "heading",
});
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",
);
},
animateText({
target: aboutSection.querySelectorAll(".heading p"),
timeline: tl,
label: "heading-text",
});
tl.from(
aboutSection.querySelector(".background"),
{
duration: 2,
opacity: 0,
ease: "expo.out",
},
"image",
);
customAnimate({
target: aboutSection.querySelector(".background"),
animationProps: { duration: 2, opacity: 0, yPercent: 3 },
timeline: tl,
label: "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",
);
},
animateText({
target: aboutSection.querySelectorAll(".image > p"),
timeline: tl,
label: "image-text",
});
});
}
src/components/landing/ContactSection.astro
+52 -79
View File
@@ -11,7 +11,7 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
<Picture
class="image"
src={ContactImage}
alt="An abstract image of a black and gold background"
alt="Abstract shape in black and gold for decoration"
/>
<div class="content">
@@ -142,11 +142,11 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
<script>
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(SplitText);
gsap.registerPlugin(ScrollTrigger);
import {
animateHeading,
animateText,
customAnimate,
} from "../../scripts/animations";
const contactSection = document.querySelector(".contact");
@@ -166,89 +166,62 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
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",
);
animateHeading({
target: contactSection.querySelector("h2"),
timeline: tl,
label: "heading",
});
animateText({
target: contactSection.querySelector("p"),
timeline: tl,
label: "text",
});
customAnimate({
target: contactSection.querySelector(".image"),
animationProps: { duration: 1, opacity: 0, xPercent: -2 },
timeline: tl,
label: "image",
});
animateHeading({
target: contactSection.querySelector("h2"),
timeline: tl,
label: "heading",
animationProps: {
scrollTrigger: {
trigger: contactSection,
start: "top 50%",
},
},
});
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",
);
const link = contactSection.querySelector("a");
animateHeading({
target: link,
animationProps: {
scrollTrigger: {
trigger: link,
start: "top 70%",
},
},
});
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(),
});
},
});
tl.from(
contactSection.querySelector("a > svg"),
{
customAnimate({
target: contactSection.querySelector("a > svg"),
animationProps: {
scrollTrigger: {
trigger: link,
start: "top 70%",
},
delay: 0.7,
duration: 1,
opacity: 0,
yPercent: -10,
ease: "expo.out",
},
"arrow",
);
});
});
}
</script>
src/components/landing/HeroSection.astro
+35 -63
View File
@@ -1,19 +1,20 @@
---
import Picture from "astro/components/Picture.astro";
import HeroImage from "../../assets/img/hero.jpg";
import ArrowDown from "../icons/ArrowDown.astro";
import BlurryOrb from "../BlurryOrb.astro";
import ArrowDown from "../icons/ArrowDown.astro";
---
<div class="hero" aria-label="Hero section">
<BlurryOrb top="50%" left="5%" size="30rem" opacity="0.15" />
<BlurryOrb top="50%" left="15%" size="30rem" opacity="0.15" />
<div class="image-wrapper">
<Picture
class="image"
src={HeroImage}
formats={["jpg", "jpeg", "webp"]}
alt="todo"
alt="Abstract shape in red for decoration"
loading="eager"
/>
</div>
@@ -56,6 +57,7 @@ import BlurryOrb from "../BlurryOrb.astro";
max-height: 40vh;
position: relative;
z-index: -1;
will-change: opacity, transform;
@media screen and (max-width: 49.9375rem) {
margin-top: 1.5rem;
@@ -192,11 +194,11 @@ import BlurryOrb from "../BlurryOrb.astro";
<script>
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(SplitText);
gsap.registerPlugin(ScrollTrigger);
import {
customAnimate,
animateHeading,
animateText,
} from "../../scripts/animations";
const heroSection = document.querySelector(".hero");
@@ -204,75 +206,45 @@ import BlurryOrb from "../BlurryOrb.astro";
const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
const tl = gsap.timeline().pause();
const tl = gsap.timeline({ paused: true });
tl.addLabel("heading", 0);
tl.addLabel("image", 0.2);
tl.addLabel("text", 0.8);
tl.addLabel("arrow", 1.5);
tl.from(
heroSection.querySelector(".image-wrapper"),
{
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",
);
},
customAnimate({
target: heroSection.querySelector(".image-wrapper"),
animationProps: { duration: 2, opacity: 0, xPercent: 10 },
timeline: tl,
label: "image",
});
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();
},
animateHeading({
target: heroSection.querySelector("h1"),
timeline: tl,
label: "heading",
});
tl.from(
heroSection.querySelector(".down"),
{
animateText({
target: heroSection.querySelector("p"),
timeline: tl,
label: "text",
});
customAnimate({
target: heroSection.querySelector(".down"),
animationProps: {
duration: 1,
opacity: 0,
translateY: "-100%",
yPercent: -100,
ease: "bounce.out",
},
"arrow",
);
timeline: tl,
label: "arrow",
});
tl.play();
});
}
</script>
src/components/landing/ServicesCard.astro
+2
View File
@@ -34,6 +34,7 @@ const { title, image, items } = Astro.props;
display: grid;
grid-template-rows: auto 1fr auto;
max-height: 24rem;
will-change: transform, opacity;
& > * {
grid-column: 1;
@@ -72,6 +73,7 @@ const { title, image, items } = Astro.props;
transition: all;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
will-change: filter;
}
.image {
src/components/landing/ServicesSection.astro
+22 -50
View File
@@ -10,7 +10,7 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
title: "Innovative Solutions",
image: {
src: Image1,
alt: "A picture showing an abstract form in teal",
alt: "Abstract shape in teal for decoration",
},
items: [
"Modern Websites",
@@ -22,7 +22,7 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
title: "Tailored Designs",
image: {
src: Image2,
alt: "A picture showing an abstract form in blue/purple",
alt: "Abstract shape in blue/purple for decoration",
},
items: ["Webdesign", "App Design", "Brand/Identity Design"],
},
@@ -30,7 +30,7 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
title: "Flexible Projects",
image: {
src: Image3,
alt: "A picture showing an abstract form in red",
alt: "Abstract shape in red for decoration",
},
items: ["Digital Sovereignty", "Freelancing", "Consulting"],
},
@@ -123,11 +123,11 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
<script>
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(SplitText);
gsap.registerPlugin(ScrollTrigger);
import {
animateHeading,
animateText,
customAnimate,
} from "../../scripts/animations";
const servicesSection = document.querySelector(".services");
@@ -146,58 +146,30 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
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",
);
},
animateHeading({
target: servicesSection.querySelector("h2"),
timeline: tl,
label: "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",
);
},
animateText({
target: servicesSection.querySelector("p"),
timeline: tl,
label: "text",
});
tl.from(
servicesSection.querySelectorAll(".cards > *"),
{
customAnimate({
target: ".cards > *",
animationProps: {
duration: 1,
opacity: 0,
yPercent: 5,
stagger: 0.15,
ease: "expo.out",
},
"cards",
);
timeline: tl,
label: "cards",
});
});
}
</script>
src/components/landing/ValuesSection.astro
+25 -81
View File
@@ -137,11 +137,7 @@ function formatIndex(index: number) {
<script>
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(SplitText);
gsap.registerPlugin(ScrollTrigger);
import { animateHeading, animateText } from "../../scripts/animations";
const valuesSection = document.querySelector(".values");
@@ -151,99 +147,47 @@ function formatIndex(index: number) {
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(),
});
animateHeading({
target: heading,
animationProps: {
scrollTrigger: {
trigger: heading,
start: "top 70%",
},
},
});
const items = valuesSection.querySelectorAll("li");
items.forEach((item) => {
const itemTl = gsap.timeline({
const tl = gsap.timeline({
scrollTrigger: {
trigger: item,
start: "top 70%",
},
});
itemTl.addLabel("number", 0);
itemTl.addLabel("heading", 0.2);
itemTl.addLabel("text", 0.5);
tl.addLabel("number", 0);
tl.addLabel("heading", 0.2);
tl.addLabel("text", 0.5);
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",
);
},
animateHeading({
target: item.querySelector("span"),
timeline: tl,
label: "number",
animationProps: { stagger: 0.25 },
});
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",
);
},
animateHeading({
target: item.querySelector("h3"),
timeline: tl,
label: "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",
);
},
animateText({
target: item.querySelector("p"),
timeline: tl,
label: "text",
});
});
});
src/layouts/BaseLayout.astro
+3 -1
View File
@@ -1,5 +1,6 @@
---
import Footer from "../components/Footer.astro";
import GlobalScripts from "../components/GlobalScripts.astro";
import GlobalStyles from "../components/GlobalStyles.astro";
import Header from "../components/Header.astro";
import PlausibleAnalytics from "../components/PlausibleAnalytics.astro";
@@ -15,7 +16,7 @@ const title = pageTitle
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
@@ -51,6 +52,7 @@ const title = pageTitle
</head>
<body>
<GlobalStyles />
<GlobalScripts />
<Header />
src/layouts/ErrorLayout.astro
+1 -1
View File
@@ -8,7 +8,7 @@ import PlausibleAnalytics from "../components/PlausibleAnalytics.astro";
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>Oops, this is weird</title>
src/pages/imprint.astro
+11 -26
View File
@@ -69,9 +69,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
<script>
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(SplitText);
import { animateHeading, customAnimate } from "../scripts/animations";
const page = document.querySelector(".imprint");
@@ -79,30 +77,17 @@ import BaseLayout from "../layouts/BaseLayout.astro";
const mm = gsap.matchMedia();
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(),
});
},
});
animateHeading({ target: page.querySelector("h1") });
gsap.from(page.querySelectorAll(":scope > div"), {
duration: 1,
delay: 0.3,
opacity: 0,
yPercent: -20,
ease: "expo.out",
stagger: 0.1,
customAnimate({
target: page.querySelectorAll(":scope > div"),
animationProps: {
duration: 1,
delay: 0.3,
opacity: 0,
translateY: -16,
stagger: 0.1,
},
});
});
}
src/pages/privacy.astro
+11 -26
View File
@@ -132,9 +132,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
<script>
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(SplitText);
import { animateHeading, customAnimate } from "../scripts/animations";
const page = document.querySelector(".privacy");
@@ -142,30 +140,17 @@ import BaseLayout from "../layouts/BaseLayout.astro";
const mm = gsap.matchMedia();
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(),
});
},
});
animateHeading({ target: page.querySelector("h1") });
gsap.from(page.querySelectorAll(".content > *"), {
duration: 1,
delay: 0.3,
opacity: 0,
yPercent: -20,
ease: "expo.out",
stagger: 0.1,
customAnimate({
target: page.querySelectorAll(":scope > div"),
animationProps: {
duration: 1,
delay: 0.3,
opacity: 0,
translateY: -16,
stagger: 0.1,
},
});
});
}
src/scripts/animations.ts
+72
View File
@@ -0,0 +1,72 @@
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
import { isWebkit } from "./utils";
export function animateHeading(params: {
target: gsap.DOMTarget,
timeline?: gsap.core.Timeline,
label?: string
animationProps?: gsap.TweenVars
}) {
if (isWebkit()) return;
const { target, timeline, label, animationProps = {} } = params;
new SplitText(target, {
type: "words, chars",
autoSplit: true,
mask: "chars",
charsClass: "char",
onSplit: (self) => {
(timeline ? timeline : gsap).from(self.chars, {
duration: 1,
yPercent: -120,
stagger: 0.015,
ease: "expo.out",
...animationProps,
onComplete: () => self.revert(),
}, label);
},
});
}
export function animateText(params: {
target: gsap.DOMTarget,
timeline?: gsap.core.Timeline,
label?: string,
animationProps?: gsap.TweenVars
}) {
if (isWebkit()) return;
const { target, timeline, label, animationProps = {} } = params;
new SplitText(target, {
type: "lines, words",
autoSplit: true,
mask: "lines",
linesClass: "line",
onSplit: (self) => {
(timeline ? timeline : gsap).from(self.lines, {
duration: 0.9,
yPercent: 105,
stagger: 0.06,
ease: "expo.out",
...animationProps,
onComplete: () => self.revert(),
}, label);
},
});
}
export function customAnimate(params: {
target: gsap.DOMTarget,
animationProps: gsap.TweenVars
timeline?: gsap.core.Timeline,
label?: string,
}) {
if (isWebkit()) return;
const { target, animationProps, timeline, label } = params;
(timeline ? timeline : gsap).from(target, {
ease: "expo.out",
...animationProps
}, label);
}
src/scripts/utils.ts
+3
View File
@@ -0,0 +1,3 @@
export function isWebkit() {
return "GestureEvent" in window;
}