feat: add scroll-driven animation in header comp

package.json

@@ -46,7 +46,7 @@
         "@fontsource/baskervville": "^5.0.19",
         "@hookform/resolvers": "^3.3.4",
         "@million/lint": "^0.0.73",
-        "@types/node": "^20.11.30",
+        "@types/node": "^20.12.2",
         "@types/react": "^18.2.73",
         "@types/react-dom": "^18.2.23",
         "astro": "^4.5.12",
@@ -71,7 +71,7 @@
         "@testing-library/react-hooks": "^8.0.1",
         "@types/eslint": "^8.56.6",
         "@types/markdown-it": "^13.0.7",
-        "@types/three": "^0.162.0",
+        "@types/three": "^0.163.0",
         "@typescript-eslint/eslint-plugin": "^7.4.0",
         "@typescript-eslint/parser": "^7.4.0",
         "eslint": "^8.57.0",

src/pages/index.astro

@@ -24,8 +24,6 @@ import LatestArticles from '@components/organisms/latestArticles/LatestArticles.
 // todo: improve isolation
 // todo: add thinner svg lines
 // todo: reduce XXSS module
-// todo: fix box shadow on load (https://css-tricks.com/fixing-box-shadow-z-index-bug/)
-// todo: use scroll-driven animations to add box shadow on header when scroll
 // todo: replace arrows and icons for a finest ones
 // todo: refer logo (original + finet)
 // todo: add vitest

src/ui/components/atoms/logo/logo.css

@@ -1,23 +1,27 @@
 @layer header.logo {
   .site__logo {
+    animation: shrink linear both;
+    animation-range: 0 5vw;
+    animation-timeline: scroll();
     display: block;
     height: fit-content;
     inset: 1rem 0 0;
     margin: 0 auto;
     position: absolute;
     transition:
       top 0.3s linear 1.75s,
-      scale 0.2s;
+      scale 0.2s linear 0.3s,
+      transform 0.2s linear;
     width: 307px;
     z-index: 20;
 
     svg {
       transition:
-        scale 0.2s,
-        fill 0.3s;
+        top 0.3s linear 1.75s,
+        scale 0.2s linear;
     }
 
-    &.--is-scrolling:not(.--is-menu-open) svg {
+    :not(.--is-menu-open) svg {
       scale: 0.85;
     }
   }

src/ui/components/organisms/header/header.css

@@ -1,5 +1,8 @@
 @layer header {
   .header {
+    animation: add-shadow linear both;
+    animation-range: 0 1vw;
+    animation-timeline: scroll();
     height: var(--header-height);
     margin-inline: auto;
     position: fixed;
@@ -8,12 +11,8 @@
     width: 100%;
     z-index: 1000;
 
-    &.--is-scrolling {
-      box-shadow: 0 0.125rem 0.375rem var(--neutral-light-2);
-
-      &::after {
-        clip-path: polygon(0 0, 100% 0, 100% 120%, 0 120%);
-      }
+    &::after {
+      clip-path: polygon(0 0, 100% 0, 100% 120%, 0 120%);
     }
 
     .header__wrapper {

src/ui/components/organisms/header/utils/toggleMenu/toggleMenu.ts

@@ -96,7 +96,7 @@ export function toggleMenu() {
             },
             '<'
         );
-        timeline.to(SITE_LOGO, { y: '3rem', duration: 0.25 }, '-=0.5');
+        timeline.to(SITE_LOGO, { y: '2rem', duration: 0.25 }, '-=0.5');
         timeline.to(SITE_LOGO_SVG, { fill: WHITE, duration: 0.25 }, '-=1');
         timeline
             .to(OVERLAY_PATH, { attr: { d: PATH_START }, ease: POWER2_EASE_IN, duration: 1 }, '<')

src/ui/components/organisms/siteHead/SiteHead.astro

@@ -39,8 +39,7 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props as
 <script
   type="text/partytown"
   src=`https://www.googletagmanager.com/gtag/js?id=${import.meta.env.PUBLIC_GOOGLE_ANALYTICS_ID}`
->
-</script>
+></script>
 <script type="text/partytown">
   window.dataLayer = window.dataLayer || [];
 

src/ui/context/reactScriptProvider/ReactScriptProvider.tsx

@@ -1,14 +1,12 @@
 import { useEffect } from 'react';
 import { toggleMenu } from '@components/organisms/header/utils/toggleMenu';
-import { scrollDirection } from '@components/organisms/header/utils/scrollDirection';
 import { initializeParallax } from '@components/molecules/welcome/utils/initializeParallax';
 import { backgroundObserver } from '@components/organisms/header/utils/backgroundObserver';
 import { mailTo } from '@shared/utils/mailTo';
 
 const ReactScriptProvider = () => {
   useEffect(() => {
     toggleMenu();
-    scrollDirection();
     initializeParallax();
     backgroundObserver();
     mailTo();

src/ui/styles/global/animations.css

@@ -1,4 +1,16 @@
 @layer animations {
+  @keyframes add-shadow {
+    to {
+      box-shadow: 0 0.125rem 0.375rem var(--neutral-light-2);
+    }
+  }
+
+  @keyframes shrink {
+    to {
+      scale: 0.85;
+    }
+  }
+
   @keyframes morph {
     0% {
       border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

yarn.lock

@@ -2693,12 +2693,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^20.11.30":
-  version: 20.11.30
-  resolution: "@types/node@npm:20.11.30"
+"@types/node@npm:^20.12.2":
+  version: 20.12.2
+  resolution: "@types/node@npm:20.12.2"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 867cfaf969c6d8850d8d7304e7ab739898a50ecb1395b61ff2335644f5f48d7a46fbc4a14cee967aed65ec134b61a746edae70d1f32f11321ccf29165e3bc4e6
+  checksum: bb47d115a8f95aadebdd6403fee16d149d6b5568ad53bacc42df34c2d572561e36ba47b05f7f68bada43752d7369b470a90df65b646af7502dfb799a21b4fca7
   languageName: node
   linkType: hard
 
@@ -2778,16 +2778,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/three@npm:^0.162.0":
-  version: 0.162.0
-  resolution: "@types/three@npm:0.162.0"
+"@types/three@npm:^0.163.0":
+  version: 0.163.0
+  resolution: "@types/three@npm:0.163.0"
   dependencies:
     "@tweenjs/tween.js": "npm:~23.1.1"
     "@types/stats.js": "npm:*"
     "@types/webxr": "npm:*"
-    fflate: "npm:~0.6.10"
+    fflate: "npm:~0.8.2"
     meshoptimizer: "npm:~0.18.1"
-  checksum: d4817bcb30e83804c20f505fae5a40e3d307a570b25fec65a73366c09859f7e7860cf2bf0757aa7d90f908ae7ed7d710db66b6a7cd638d6869909b4e7dfb7198
+  checksum: 715406a709bdcf567ba844c598c73dac07b679df942f85c578e82a33d00ae3ac67e8f6a3e030ec75ba0f639d33c65fb7ec6237c11a4a501c98569d99bc67a5b6
   languageName: node
   linkType: hard
 
@@ -3676,10 +3676,10 @@ __metadata:
     "@testing-library/react-hooks": "npm:^8.0.1"
     "@types/eslint": "npm:^8.56.6"
     "@types/markdown-it": "npm:^13.0.7"
-    "@types/node": "npm:^20.11.30"
+    "@types/node": "npm:^20.12.2"
     "@types/react": "npm:^18.2.73"
     "@types/react-dom": "npm:^18.2.23"
-    "@types/three": "npm:^0.162.0"
+    "@types/three": "npm:^0.163.0"
     "@typescript-eslint/eslint-plugin": "npm:^7.4.0"
     "@typescript-eslint/parser": "npm:^7.4.0"
     astro: "npm:^4.5.12"
@@ -5753,10 +5753,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fflate@npm:~0.6.10":
-  version: 0.6.10
-  resolution: "fflate@npm:0.6.10"
-  checksum: c452f720e4cb404b300fceb8ef0bdf345f18fbfd3f57f7d0974dce5f5e2ac0e8dd4b6ff4bb7061ae74fd919b9c707172f9dbd44d91149b1137199b8c705768f1
+"fflate@npm:~0.8.2":
+  version: 0.8.2
+  resolution: "fflate@npm:0.8.2"
+  checksum: 03448d630c0a583abea594835a9fdb2aaf7d67787055a761515bf4ed862913cfd693b4c4ffd5c3f3b355a70cf1e19033e9ae5aedcca103188aaff91b8bd6e293
   languageName: node
   linkType: hard