Refactored class names to be reusable

This commit is contained in:
2026-09-23 08:10:46 -07:00
parent daf87c9671
commit 5681a38087
3 changed files with 357 additions and 460 deletions
+1
View File
@@ -4,6 +4,7 @@
### Project ### ### Project ###
Site* Site*
website-copy.md website-copy.md
style-guide.md
### dotenv ### ### dotenv ###
.env .env
+120 -120
View File
@@ -15,24 +15,24 @@
href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap" href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap"
rel="stylesheet" rel="stylesheet"
> >
<link rel="stylesheet" href="styles.css?version=section-theses"> <link rel="stylesheet" href="styles.css?version=reusable-classes">
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
</head> </head>
<body id="top"> <body id="top">
<a class="skip-to-main-content-link" href="#main-content">Skip to main content</a> <a class="skip-link label-uppercase" href="#main-content">Skip to main content</a>
<header class="website-header"> <header class="border-bottom-subtle">
<div class="site-width-boundary website-header-inner"> <div class="content-boundary grid-centered-content">
<a <a
class="brand-logo-link website-header-logo-link" class="image-link image-link-large-centered"
href="#top" href="#top"
aria-label="Noel Design Atelier, back to top" aria-label="Noel Design Atelier, back to top"
> >
<img <img
class="brand-logo-image website-header-logo-image" class="image-fluid"
src="images/logo.webp" src="images/logo.webp"
width="4167" width="4167"
height="1063" height="1063"
@@ -41,12 +41,12 @@
> >
</a> </a>
<nav class="primary-navigation" aria-label="Primary navigation"> <nav class="grid-trailing-content" aria-label="Primary navigation">
<ul class="primary-navigation-list"> <ul class="link-row">
<li><a class="primary-navigation-link" href="#philosophy">Philosophy</a></li> <li><a class="underline-reveal-link label-uppercase" href="#philosophy">Philosophy</a></li>
<li><a class="primary-navigation-link" href="#approach">Approach</a></li> <li><a class="underline-reveal-link label-uppercase" href="#approach">Approach</a></li>
<li><a class="primary-navigation-link" href="#work">Season</a></li> <li><a class="underline-reveal-link label-uppercase" href="#work">Season</a></li>
<li><a class="primary-navigation-link" href="#contact">Contact</a></li> <li><a class="underline-reveal-link label-uppercase" href="#contact">Contact</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
@@ -54,34 +54,34 @@
<main id="main-content"> <main id="main-content">
<section <section
class="site-width-boundary homepage-hero-section image-overlap-heading-dynamic-inversion-container" class="content-boundary grid-twelve-columns grid-overlapping-introduction isolate-blending surface-paper"
aria-labelledby="homepage-hero-title" aria-labelledby="homepage-hero-title"
> >
<p class="section-context-label">Holiday installations <span aria-hidden="true">/</span> Pacific Northwest</p> <p class="eyebrow-label label-uppercase">Holiday installations <span aria-hidden="true">/</span> Pacific Northwest</p>
<h1 <h1
class="homepage-hero-title image-overlap-heading-dynamic-inversion animate-header" class="heading-editorial heading-display text-invert-over-image reveal-on-scroll"
id="homepage-hero-title" id="homepage-hero-title"
> >
<span>Composing</span> <span>Composing</span>
<span>the season.</span> <span>the season.</span>
</h1> </h1>
<div class="homepage-hero-introduction"> <div class="grid-lower-leading-copy">
<span class="brand-occasion-mark" aria-hidden="true">✦</span> <span class="decorative-mark" aria-hidden="true">✦</span>
<p> <p>
We create holiday installations that welcome you into the season. From the first We create holiday installations that welcome you into the season. From the first
glimpse of greenery to the glow beyond a doorway, each space offers a reason to glimpse of greenery to the glow beyond a doorway, each space offers a reason to
pause and stay a little longer. pause and stay a little longer.
</p> </p>
<a class="editorial-text-link" href="#philosophy"> <a class="arrow-link label-uppercase" href="#philosophy">
Step inside <span aria-hidden="true">→</span> Step inside <span aria-hidden="true">→</span>
</a> </a>
</div> </div>
<figure class="homepage-hero-image-figure" data-parallax="25"> <figure class="grid-overlapping-trailing-image" data-parallax="25">
<div <div
class="photography-frame photography-frame-tall" class="image-frame aspect-ratio-four-to-five"
role="img" role="img"
aria-label="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns" aria-label="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns"
> >
@@ -90,16 +90,16 @@
</figure> </figure>
</section> </section>
<section class="editorial-section philosophy-section" id="philosophy" aria-labelledby="philosophy-title"> <section class="spaced-bordered-block" id="philosophy" aria-labelledby="philosophy-title">
<div class="site-width-boundary"> <div class="content-boundary">
<header> <header>
<p class="section-context-label">Our Philosophy</p> <p class="eyebrow-label label-uppercase">Our Philosophy</p>
</header> </header>
<div class="philosophy-content-grid"> <div class="grid-twelve-columns grid-three-part-content">
<figure class="philosophy-image-figure" data-parallax="15"> <figure class="grid-leading-image" data-parallax="15">
<div <div
class="photography-frame photography-frame-portrait" class="image-frame aspect-ratio-three-to-four"
role="img" role="img"
aria-label="Cedar garland and velvet ribbon following a curved staircase" aria-label="Cedar garland and velvet ribbon following a curved staircase"
> >
@@ -107,13 +107,13 @@
</div> </div>
</figure> </figure>
<h2 class="editorial-statement-title animate-header" id="philosophy-title"> <h2 class="heading-editorial heading-statement reveal-on-scroll" id="philosophy-title">
The season begins The season begins
<span>with the space.</span> <span>with the space.</span>
</h2> </h2>
<div class="philosophy-supporting-copy"> <div class="grid-trailing-copy paragraph-stack">
<p class="philosophy-brand-thesis"> <p class="text-emphasis label-uppercase">
We begin by noticing what makes a place itself. We begin by noticing what makes a place itself.
</p> </p>
<p> <p>
@@ -126,7 +126,7 @@
of the holidays. We design for that sense of recognition: a room that feels of the holidays. We design for that sense of recognition: a room that feels
quietly new yet deeply familiar, like returning to somewhere you love. quietly new yet deeply familiar, like returning to somewhere you love.
</p> </p>
<a class="editorial-text-link" href="#approach"> <a class="arrow-link label-uppercase" href="#approach">
A closer look <span aria-hidden="true">→</span> A closer look <span aria-hidden="true">→</span>
</a> </a>
</div> </div>
@@ -135,25 +135,25 @@
</section> </section>
<section <section
class="editorial-section approach-section image-overlap-heading-dynamic-inversion-container" class="spaced-bordered-block clip-overflow isolate-blending surface-paper"
id="approach" id="approach"
aria-labelledby="approach-title" aria-labelledby="approach-title"
> >
<div class="site-width-boundary"> <div class="content-boundary">
<header> <header>
<p class="section-context-label">Our Approach</p> <p class="eyebrow-label label-uppercase">Our Approach</p>
</header> </header>
<h2 <h2
class="oversized-editorial-title approach-image-overlap-title image-overlap-heading-dynamic-inversion animate-header" class="heading-editorial heading-oversized heading-offset-down text-invert-over-image reveal-on-scroll"
id="approach-title" id="approach-title"
> >
By hand. By hand.
</h2> </h2>
<div class="approach-content-grid"> <div class="grid-twelve-columns grid-narrow-copy-wide-image">
<div class="approach-supporting-copy"> <div class="grid-leading-copy paragraph-stack">
<p class="section-brand-thesis"> <p class="text-emphasis label-uppercase">
We bring the season to life by hand. We bring the season to life by hand.
</p> </p>
<p> <p>
@@ -165,14 +165,14 @@
As we work, we adjust the balance and spacing of the details, bringing them into As we work, we adjust the balance and spacing of the details, bringing them into
a composition that feels at home in the room. a composition that feels at home in the room.
</p> </p>
<a class="editorial-text-link" href="#work"> <a class="arrow-link label-uppercase" href="#work">
Imagine the season <span aria-hidden="true">→</span> Imagine the season <span aria-hidden="true">→</span>
</a> </a>
</div> </div>
<figure class="approach-image-figure" data-parallax="25"> <figure class="grid-wide-inset-image" data-parallax="25">
<div <div
class="photography-frame photography-frame-landscape" class="image-frame aspect-ratio-sixteen-to-ten"
role="img" role="img"
aria-label="Hands arranging ribbon, cedar, and brass ornaments on a worktable" aria-label="Hands arranging ribbon, cedar, and brass ornaments on a worktable"
> >
@@ -181,9 +181,9 @@
</figure> </figure>
</div> </div>
<div class="approach-principles-grid" aria-label="How we compose a space"> <div class="card-grid card-grid-three-columns" aria-label="How we compose a space">
<article class="approach-principle"> <article class="card card-spacious">
<span class="approach-principle-index" aria-hidden="true">I.</span> <span class="card-index" aria-hidden="true">I.</span>
<h3>Texture</h3> <h3>Texture</h3>
<p> <p>
We select cedar, velvet, brass, and glass for the way their textures meet. The We select cedar, velvet, brass, and glass for the way their textures meet. The
@@ -192,8 +192,8 @@
</p> </p>
</article> </article>
<article class="approach-principle"> <article class="card card-spacious">
<span class="approach-principle-index" aria-hidden="true">II.</span> <span class="card-index" aria-hidden="true">II.</span>
<h3>Gesture</h3> <h3>Gesture</h3>
<p> <p>
We shape greenery and tie ribbon by hand, working with the natural movement of We shape greenery and tie ribbon by hand, working with the natural movement of
@@ -202,8 +202,8 @@
</p> </p>
</article> </article>
<article class="approach-principle"> <article class="card card-spacious">
<span class="approach-principle-index" aria-hidden="true">III.</span> <span class="card-index" aria-hidden="true">III.</span>
<h3>Atmosphere</h3> <h3>Atmosphere</h3>
<p> <p>
We compose the installation as part of the whole room, considering where the eye We compose the installation as part of the whole room, considering where the eye
@@ -215,16 +215,16 @@
</div> </div>
</section> </section>
<section class="editorial-section work-section" id="work" aria-labelledby="work-title"> <section class="spaced-bordered-block surface-dark surface-dark-bordered" id="work" aria-labelledby="work-title">
<div class="site-width-boundary"> <div class="content-boundary">
<header class="numbered-section-heading-on-dark"> <header>
<p class="section-context-label">Seasonal Possibilities</p> <p class="eyebrow-label label-uppercase">Seasonal Possibilities</p>
</header> </header>
<div class="work-heading-grid"> <div class="grid-twelve-columns grid-heading-and-copy">
<h2 class="oversized-editorial-title animate-header" id="work-title">Gather.</h2> <h2 class="heading-editorial heading-oversized reveal-on-scroll" id="work-title">Gather.</h2>
<div class="work-introduction-copy"> <div class="grid-trailing-introduction paragraph-stack">
<p class="section-brand-thesis section-brand-thesis-on-dark"> <p class="text-emphasis label-uppercase text-brass">
We create settings that bring people together. We create settings that bring people together.
</p> </p>
<p> <p>
@@ -236,52 +236,52 @@
</div> </div>
</div> </div>
<div class="work-gallery-grid" aria-label="Imagined holiday settings"> <div class="grid-twelve-columns grid-staggered-images" aria-label="Imagined holiday settings">
<figure class="work-gallery-primary-figure"> <figure class="grid-wide-leading-image">
<div <div
class="photography-frame photography-frame-wide" class="image-frame aspect-ratio-sixteen-to-nine"
role="img" role="img"
aria-label="A tall evergreen tree lit with warm lights in a grand room" aria-label="A tall evergreen tree lit with warm lights in a grand room"
> >
<img src="images/gather-1.webp" alt="A tall evergreen tree lit with warm lights in a grand room" decoding="async"> <img src="images/gather-1.webp" alt="A tall evergreen tree lit with warm lights in a grand room" decoding="async">
</div> </div>
<figcaption> <figcaption class="caption-grid">
<span class="work-project-category">On arrival</span> <span class="caption-label label-uppercase">On arrival</span>
<span class="work-project-description"> <span class="caption-description">
A tree glowing at the end of a room offers a first glimpse of the celebration A tree glowing at the end of a room offers a first glimpse of the celebration
within, inviting a guest to slow their step as they enter. within, inviting a guest to slow their step as they enter.
</span> </span>
</figcaption> </figcaption>
</figure> </figure>
<figure class="work-gallery-secondary-figure"> <figure class="grid-tall-trailing-image">
<div <div
class="photography-frame photography-frame-portrait" class="image-frame aspect-ratio-three-to-four"
role="img" role="img"
aria-label="A holiday table set with greenery and candles for a small gathering" aria-label="A holiday table set with greenery and candles for a small gathering"
> >
<img src="images/gather-2.webp" alt="A holiday table set with greenery and candles for a small gathering" decoding="async"> <img src="images/gather-2.webp" alt="A holiday table set with greenery and candles for a small gathering" decoding="async">
</div> </div>
<figcaption> <figcaption class="caption-grid">
<span class="work-project-category">Around the table</span> <span class="caption-label label-uppercase">Around the table</span>
<span class="work-project-description"> <span class="caption-description">
A table framed by greenery leaves room for familiar faces and a conversation A table framed by greenery leaves room for familiar faces and a conversation
that carries on long after the last plate is cleared. that carries on long after the last plate is cleared.
</span> </span>
</figcaption> </figcaption>
</figure> </figure>
<figure class="work-gallery-detail-figure"> <figure class="grid-small-inset-image">
<div <div
class="photography-frame photography-frame-square" class="image-frame aspect-ratio-square"
role="img" role="img"
aria-label="Close view of velvet ribbon tied beside an antique brass ornament" aria-label="Close view of velvet ribbon tied beside an antique brass ornament"
> >
<img src="images/gather-3.webp" alt="Close view of velvet ribbon tied beside an antique brass ornament" decoding="async"> <img src="images/gather-3.webp" alt="Close view of velvet ribbon tied beside an antique brass ornament" decoding="async">
</div> </div>
<figcaption> <figcaption class="caption-grid">
<span class="work-project-category">A closer look</span> <span class="caption-label label-uppercase">A closer look</span>
<span class="work-project-description"> <span class="caption-description">
In a fold of velvet or the patina of brass, there is another small discovery. In a fold of velvet or the patina of brass, there is another small discovery.
Such details reward a second glance as the evening unfolds. Such details reward a second glance as the evening unfolds.
</span> </span>
@@ -291,25 +291,25 @@
</div> </div>
</section> </section>
<section class="editorial-section client-fit-section" id="places" aria-labelledby="client-fit-title"> <section class="spaced-bordered-block surface-red-borderless" id="places" aria-labelledby="client-fit-title">
<div class="site-width-boundary"> <div class="content-boundary">
<div class="client-fit-content-grid"> <div class="grid-twelve-columns grid-overlapping-halves">
<div class="client-fit-heading-content"> <div class="grid-leading-layer">
<p class="section-context-label section-context-label-brass">Who we design for</p> <p class="eyebrow-label label-uppercase text-brass">Who we design for</p>
<h2 class="client-fit-title animate-header" id="client-fit-title">Your kind of welcome.</h2> <h2 class="heading-editorial heading-large heading-large-raised reveal-on-scroll" id="client-fit-title">Your kind of welcome.</h2>
<p class="client-fit-positioning-copy"> <p class="text-light-introduction">
Whether you are welcoming guests for a night or bringing family home for the Whether you are welcoming guests for a night or bringing family home for the
season, your space holds its own rituals. We design our compositions around the season, your space holds its own rituals. We design our compositions around the
way you welcome people, giving your gatherings a setting that feels like yours. way you welcome people, giving your gatherings a setting that feels like yours.
</p> </p>
<a class="editorial-text-link editorial-text-link-light" href="#contact"> <a class="arrow-link label-uppercase text-paper" href="#contact">
Start a conversation <span aria-hidden="true">→</span> Start a conversation <span aria-hidden="true">→</span>
</a> </a>
</div> </div>
<figure class="client-fit-image-figure" data-parallax="15"> <figure class="grid-trailing-layer" data-parallax="15">
<div <div
class="photography-frame photography-frame-landscape" class="image-frame aspect-ratio-sixteen-to-ten"
role="img" role="img"
aria-label="An open doorway framed by cedar garland and warm lights" aria-label="An open doorway framed by cedar garland and warm lights"
> >
@@ -318,8 +318,8 @@
</figure> </figure>
</div> </div>
<div class="client-fit-category-grid" aria-label="Places and people we design for"> <div class="card-grid card-grid-four-columns" aria-label="Places and people we design for">
<article class="client-fit-category"> <article class="card card-compact">
<h3>Luxury hospitality</h3> <h3>Luxury hospitality</h3>
<p> <p>
We compose entrances and shared spaces in hotels and destination properties We compose entrances and shared spaces in hotels and destination properties
@@ -328,7 +328,7 @@
</p> </p>
</article> </article>
<article class="client-fit-category"> <article class="card card-compact">
<h3>Automotive and flagship retail</h3> <h3>Automotive and flagship retail</h3>
<p> <p>
In showrooms and flagship stores, we choose materials and arrange seasonal In showrooms and flagship stores, we choose materials and arrange seasonal
@@ -337,7 +337,7 @@
</p> </p>
</article> </article>
<article class="client-fit-category"> <article class="card card-compact">
<h3>Private estates</h3> <h3>Private estates</h3>
<p> <p>
At home, the season gathers around familiar rituals. We design compositions for At home, the season gathers around familiar rituals. We design compositions for
@@ -346,7 +346,7 @@
</p> </p>
</article> </article>
<article class="client-fit-category"> <article class="card card-compact">
<h3>Select events</h3> <h3>Select events</h3>
<p> <p>
We arrange greenery and light around the places people meet and gather, giving We arrange greenery and light around the places people meet and gather, giving
@@ -358,51 +358,51 @@
</div> </div>
</section> </section>
<section class="editorial-section contact-section" id="contact" aria-labelledby="contact-title"> <section class="spaced-bordered-block surface-paper" id="contact" aria-labelledby="contact-title">
<div class="site-width-boundary contact-content-grid"> <div class="content-boundary grid-twelve-columns grid-wide-gap">
<div class="contact-heading-content"> <div class="grid-leading-heading">
<p class="section-context-label">Let’s begin</p> <p class="eyebrow-label label-uppercase">Let’s begin</p>
<h2 class="contact-title animate-header" id="contact-title">Tell us your story.</h2> <h2 class="heading-editorial heading-large reveal-on-scroll" id="contact-title">Tell us your story.</h2>
<p> <p class="text-dark-introduction">
Perhaps you have a place in mind, a tradition you want to carry forward, or simply Perhaps you have a place in mind, a tradition you want to carry forward, or simply
a feeling you would love to create. Tell us a little about it. We would be glad to a feeling you would love to create. Tell us a little about it. We would be glad to
explore what the season could become with you. explore what the season could become with you.
</p> </p>
</div> </div>
<form class="project-inquiry-form" action="#contact-confirmation" method="get"> <form class="grid-trailing-form" action="#contact-confirmation" method="get">
<p class="contact-form-disclosure" id="contact-form-disclosure"> <p class="form-disclosure" id="contact-form-disclosure">
This form is a preview. Anything you enter stays in this page and is not sent to This form is a preview. Anything you enter stays in this page and is not sent to
the atelier or saved by this website. the atelier or saved by this website.
</p> </p>
<div class="project-inquiry-field-grid"> <div class="field-grid">
<div class="project-inquiry-field-group"> <div class="field-group">
<label for="inquiry-name">Your name</label> <label class="label-uppercase" for="inquiry-name">Your name</label>
<input id="inquiry-name" type="text" autocomplete="name" required> <input id="inquiry-name" type="text" autocomplete="name" required>
</div> </div>
<div class="project-inquiry-field-group"> <div class="field-group">
<label for="inquiry-email">Email</label> <label class="label-uppercase" for="inquiry-email">Email</label>
<input id="inquiry-email" type="email" autocomplete="email" required> <input id="inquiry-email" type="email" autocomplete="email" required>
</div> </div>
</div> </div>
<div class="project-inquiry-field-group"> <div class="field-group">
<label for="inquiry-organization">Your home, property, or organization</label> <label class="label-uppercase" for="inquiry-organization">Your home, property, or organization</label>
<input id="inquiry-organization" type="text" autocomplete="organization" required> <input id="inquiry-organization" type="text" autocomplete="organization" required>
</div> </div>
<div class="project-inquiry-field-group"> <div class="field-group">
<label for="inquiry-project-brief">What do you have in mind?</label> <label class="label-uppercase" for="inquiry-project-brief">What do you have in mind?</label>
<textarea id="inquiry-project-brief" rows="5" required></textarea> <textarea id="inquiry-project-brief" rows="5" required></textarea>
</div> </div>
<button class="project-inquiry-submit-button" type="submit" aria-describedby="contact-form-disclosure"> <button class="button-filled label-uppercase" type="submit" aria-describedby="contact-form-disclosure">
Preview your inquiry <span aria-hidden="true">→</span> Preview your inquiry <span aria-hidden="true">→</span>
</button> </button>
<p class="contact-form-confirmation" id="contact-confirmation" tabindex="-1"> <p class="target-notice" id="contact-confirmation" tabindex="-1">
This is where a confirmation would appear. Your message has not been sent to the This is where a confirmation would appear. Your message has not been sent to the
atelier or saved by this website. atelier or saved by this website.
</p> </p>
@@ -411,16 +411,16 @@
</section> </section>
</main> </main>
<footer class="website-footer"> <footer class="surface-dark surface-dark-padded">
<div class="site-width-boundary website-footer-grid"> <div class="content-boundary grid-weighted-columns">
<div class="website-footer-brand-column"> <div class="span-full-width-on-tablet">
<a <a
class="brand-logo-link website-footer-logo-link" class="image-link image-link-small"
href="#top" href="#top"
aria-label="Noel Design Atelier, back to top" aria-label="Noel Design Atelier, back to top"
> >
<img <img
class="brand-logo-image website-footer-logo-image" class="image-fluid image-inverted"
src="images/logo.webp" src="images/logo.webp"
width="4167" width="4167"
height="1063" height="1063"
@@ -429,11 +429,11 @@
decoding="async" decoding="async"
> >
</a> </a>
<p>For the welcome you offer and the memories you make.</p> <p class="text-muted-small">For the welcome you offer and the memories you make.</p>
</div> </div>
<nav class="website-footer-navigation" aria-label="Footer navigation"> <nav class="link-stack" aria-label="Footer navigation">
<p class="website-footer-column-title">Explore</p> <p class="column-label label-uppercase">Explore</p>
<ul> <ul>
<li><a href="#work">Season</a></li> <li><a href="#work">Season</a></li>
<li><a href="#philosophy">Philosophy</a></li> <li><a href="#philosophy">Philosophy</a></li>
@@ -442,15 +442,15 @@
</ul> </ul>
</nav> </nav>
<div class="website-footer-contact-column"> <div class="space-above-on-mobile">
<p class="website-footer-column-title">Pacific Northwest</p> <p class="column-label label-uppercase">Pacific Northwest</p>
<p>We’d love to hear what you have in mind.</p> <p class="text-muted-small">We’d love to hear what you have in mind.</p>
<a class="editorial-text-link editorial-text-link-light" href="#contact"> <a class="arrow-link label-uppercase text-paper" href="#contact">
Start a conversation <span aria-hidden="true">→</span> Start a conversation <span aria-hidden="true">→</span>
</a> </a>
</div> </div>
<p class="website-footer-copyright">© 2026 Noel Design Atelier</p> <p class="text-muted-divider">© 2026 Noel Design Atelier</p>
</div> </div>
</footer> </footer>
</body> </body>
@@ -460,7 +460,7 @@
gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollTrigger);
gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => { gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
gsap.utils.toArray(".animate-header").forEach((header) => { gsap.utils.toArray(".reveal-on-scroll").forEach((header) => {
gsap.from(header, { gsap.from(header, {
scrollTrigger: { scrollTrigger: {
trigger: header, trigger: header,
@@ -478,7 +478,7 @@
const motion = Number(figure.dataset.parallax); const motion = Number(figure.dataset.parallax);
if (!Number.isFinite(motion) || motion === 0) return; if (!Number.isFinite(motion) || motion === 0) return;
const frame = figure.querySelector(".photography-frame"); const frame = figure.querySelector(".image-frame");
gsap.fromTo(figure, { gsap.fromTo(figure, {
y: () => frame.offsetHeight * motion / 200, y: () => frame.offsetHeight * motion / 200,
+236 -340
View File
File diff suppressed because it is too large Load Diff