From f058c49c7505ff4cab584078f70d564f5c40aca2 Mon Sep 17 00:00:00 2001 From: Danica Pivalica Abram Date: Wed, 30 Jul 2025 14:11:48 +0200 Subject: [PATCH 1/6] first iteration animation --- apps/website/src/components/navigation.astro | 123 ++++++++----------- apps/website/src/styles/navigation.css | 108 ++++++++++++++++ 2 files changed, 156 insertions(+), 75 deletions(-) create mode 100644 apps/website/src/styles/navigation.css diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro index fbe9ebad..7b741941 100644 --- a/apps/website/src/components/navigation.astro +++ b/apps/website/src/components/navigation.astro @@ -1,40 +1,28 @@ --- import { getImage } from "astro:assets"; import crocoderLogo from "../assets/crocoder-logo.png"; +import "../styles/navigation.css"; const optimizedLogo = await getImage({ src: crocoderLogo, width: 63, height: 51, - format: 'webp' + format: "webp", }); --- -
+ z-50">
@@ -186,7 +155,7 @@ const optimizedLogo = await getImage({ function handleScroll(currentScrollTop) { if ( currentScrollTop > lastScrollTop && - allDataHidden[0].getAttribute("data-navhidden") === "" + allDataHidden[0].getAttribute("data-navhidden") === "true" ) { invertDataAttributte(allDataHidden); } else if ( @@ -204,7 +173,11 @@ const optimizedLogo = await getImage({ if (node.closest("li")?.textContent?.includes("Contact us")) return; const currentVal = node.getAttribute("data-navhidden"); - node.setAttribute("data-navhidden", currentVal === "" ? "false" : ""); + node.setAttribute("data-navhidden", currentVal === "true" ? "false" : "true"); + + node.style.animationName = "none"; + void node.offsetWidth; + node.style.animationName = ""; }); } diff --git a/apps/website/src/styles/navigation.css b/apps/website/src/styles/navigation.css new file mode 100644 index 00000000..83d8b476 --- /dev/null +++ b/apps/website/src/styles/navigation.css @@ -0,0 +1,108 @@ + + +@keyframes navigation-animation { + 0% { + width: 600px; + } + 100% { + width: 377px; + } +} + +@keyframes display-animation { + 0% { + display: none; + } + 100% { + display: inline-block; + } +} + +@keyframes visible-animation { + 0% { + visibility: hidden; + opacity: 0; + width: 0; + } + 100% { + visibility: visible; + opacity: 1; + width: 100%; + } +} + +@keyframes width-animation { + 0% { + width: 0px; + } + 100% { + width: auto; + } +} + + +:root { + --frame-duration: 700ms; + --frame-gap: 50ms; + --start-delay:0s; +} + +.animated-button, .animated-navigation, .animated-text { + animation-delay: var(--delay); + animation-timing-function: ease-in; + animation-duration: var(--frame-duration); + animation-fill-mode:both; +} + +.animated-navigation { + --delay: calc(var(--frame-duration) + var(--frame-gap) + var(--start-delay)); + animation-name: navigation-animation; +} + +.animated-text{ + --delay: calc(var(--start-delay)); + margin-right: 8px; + margin-left: 8px; + animation-name: visible-animation, width-animation; + animation-duration: var(--frame-duration), 0s; +} + +/* Wide - display + visibility once width done */ +img.animated-button[data-navhidden="true"], +.animated-text[data-navhidden="false"] { + --timeToFinishNav: calc(var(--frame-duration) + var(--frame-duration) + var(--frame-gap) + var(--start-delay)); + animation-delay: var(--timeToFinishNav), var(--timeToFinishNav); +} + +/* Narrow */ +img.animated-button[data-navhidden="false"], +.animated-text[data-navhidden="true"] { + animation-delay: 0s, calc(var(--frame-duration) / 2); +} + +.animated-button{ +--delay: calc(var(--start-delay)); + animation-name: visible-animation, width-animation, display-animation; +} + +.animated-navigation[data-navhidden="true"], +.animated-text[data-navhidden="true"], +.animated-button[data-navhidden="false"]{ + animation-direction:reverse; +} + + +.animated-navigation[data-navhidden="false"], +.animated-text[data-navhidden="false"], +.animated-button[data-navhidden="true"]{ + animation-direction:normal; +} + +img.animated-button { + width: auto !important; + margin-right: 8px; + animation-name: visible-animation, display-animation; +} + + + From cc96c66ad342e6ca21ec55060fa0da0ed597022d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ante=20Kocei=C4=87?= Date: Thu, 14 Aug 2025 19:15:04 +0200 Subject: [PATCH 2/6] Adjusting animation for navigation bar --- apps/website/src/components/navigation.astro | 261 +++++++++++++------ apps/website/src/styles/navigation.css | 142 ++++++---- 2 files changed, 279 insertions(+), 124 deletions(-) diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro index 7b741941..c99e027a 100644 --- a/apps/website/src/components/navigation.astro +++ b/apps/website/src/components/navigation.astro @@ -11,17 +11,21 @@ const optimizedLogo = await getImage({ }); --- -
+ z-50 + w-full flex flex-col" +> +
diff --git a/apps/website/src/styles/navigation.css b/apps/website/src/styles/navigation.css index 83d8b476..a41eb024 100644 --- a/apps/website/src/styles/navigation.css +++ b/apps/website/src/styles/navigation.css @@ -1,22 +1,22 @@ - - @keyframes navigation-animation { 0% { width: 600px; } + 100% { width: 377px; } } -@keyframes display-animation { +/* @keyframes display-animation { 0% { display: none; } + 100% { display: inline-block; } -} +} */ @keyframes visible-animation { 0% { @@ -24,6 +24,7 @@ opacity: 0; width: 0; } + 100% { visibility: visible; opacity: 1; @@ -35,74 +36,113 @@ 0% { width: 0px; } + 100% { width: auto; } } - -:root { - --frame-duration: 700ms; - --frame-gap: 50ms; - --start-delay:0s; +.line { + transition: transform 100ms ease, opacity 250ms ease; } -.animated-button, .animated-navigation, .animated-text { - animation-delay: var(--delay); - animation-timing-function: ease-in; - animation-duration: var(--frame-duration); - animation-fill-mode:both; +.line1, +.line2, +.line3 { + opacity: 1; } -.animated-navigation { - --delay: calc(var(--frame-duration) + var(--frame-gap) + var(--start-delay)); - animation-name: navigation-animation; +#nav-menu-toggle:checked+.line1 { + transform: rotate(45deg) translate(5px, 5px); } -.animated-text{ - --delay: calc(var(--start-delay)); - margin-right: 8px; - margin-left: 8px; - animation-name: visible-animation, width-animation; - animation-duration: var(--frame-duration), 0s; +#nav-menu-toggle:checked+.line1+.line2 { + transform: translateX(-10px); + opacity: 0; } -/* Wide - display + visibility once width done */ -img.animated-button[data-navhidden="true"], -.animated-text[data-navhidden="false"] { - --timeToFinishNav: calc(var(--frame-duration) + var(--frame-duration) + var(--frame-gap) + var(--start-delay)); - animation-delay: var(--timeToFinishNav), var(--timeToFinishNav); +#nav-menu-toggle:checked+.line1+.line2+.line3 { + transform: rotate(-45deg) translate(6px, -6px); } -/* Narrow */ -img.animated-button[data-navhidden="false"], -.animated-text[data-navhidden="true"] { - animation-delay: 0s, calc(var(--frame-duration) / 2); -} -.animated-button{ ---delay: calc(var(--start-delay)); - animation-name: visible-animation, width-animation, display-animation; +:root { + --frame-duration: 425ms; + --frame-gap: 50ms; + --start-delay: 0s; } -.animated-navigation[data-navhidden="true"], -.animated-text[data-navhidden="true"], -.animated-button[data-navhidden="false"]{ - animation-direction:reverse; -} +@media (min-width: 768px) { + .animated-button, + .animated-navigation, + .animated-text { + animation-delay: var(--delay); + animation-timing-function: ease-in; + animation-duration: var(--frame-duration); + animation-fill-mode: both; + } -.animated-navigation[data-navhidden="false"], -.animated-text[data-navhidden="false"], -.animated-button[data-navhidden="true"]{ - animation-direction:normal; -} + .animated-navigation { + --delay: calc(var(--frame-duration) + var(--frame-gap) + var(--start-delay)); + animation-name: navigation-animation; + } -img.animated-button { - width: auto !important; - margin-right: 8px; - animation-name: visible-animation, display-animation; -} + .animated-text { + --delay: calc(var(--start-delay)); + margin-right: 8px; + margin-left: 8px; + animation-name: visible-animation, width-animation; + animation-duration: var(--frame-duration), 0s; + } + /* Wide - display + visibility once width done */ + img.animated-button[data-navhidden="true"] { + --timeToFinishNav: calc(var(--frame-duration) / 2 + var(--frame-duration) + var(--frame-gap) + var(--start-delay)); + animation-delay: var(--timeToFinishNav), var(--timeToFinishNav); + } + a.animated-button[data-navhidden="true"] { + --timeToFinishNav: calc(var(--frame-duration) + var(--frame-duration) + var(--frame-gap) + var(--start-delay)); + animation-delay: var(--timeToFinishNav), var(--timeToFinishNav); + } + + .animated-text[data-navhidden="false"] { + --timeToFinishNav: calc(var(--frame-duration) + var(--frame-duration) + var(--frame-gap) + var(--start-delay)); + animation-delay: var(--timeToFinishNav / 2), var(--timeToFinishNav); + } + + /* Narrow */ + img.animated-button[data-navhidden="false"], + .animated-text[data-navhidden="true"] { + animation-delay: 0s, calc(var(--frame-duration) / 2); + } + + a.animated-button[data-navhidden="false"] { + animation-delay: 0s, calc(var(--frame-duration) / 2); + } + .animated-button { + --delay: calc(var(--start-delay)); + animation-name: visible-animation, width-animation; + } + + .animated-navigation[data-navhidden="true"], + .animated-text[data-navhidden="true"], + .animated-button[data-navhidden="false"] { + animation-direction: reverse; + } + + + .animated-navigation[data-navhidden="false"], + .animated-text[data-navhidden="false"], + .animated-button[data-navhidden="true"] { + animation-direction: normal; + } + + .animated-button, + .animated-text { + width: auto !important; + animation-name: visible-animation; + } +} \ No newline at end of file From 041ec125a246c511719572d581b734121127da6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ante=20Kocei=C4=87?= Date: Thu, 14 Aug 2025 19:15:46 +0200 Subject: [PATCH 3/6] Removed logs --- apps/website/src/components/navigation.astro | 7 ------- 1 file changed, 7 deletions(-) diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro index c99e027a..e3e5c06d 100644 --- a/apps/website/src/components/navigation.astro +++ b/apps/website/src/components/navigation.astro @@ -212,22 +212,16 @@ const optimizedLogo = await getImage({ containerElement.classList.add("pr-2"); handleClassChanges(allDataHidden); } - console.log("currentScrollTop", currentScrollTop); - console.log("lastScrollTop", lastScrollTop); - console.log("MEMEME", allDataHidden[0].getAttribute("id")); - console.log("MEMEME", allDataHidden[0].getAttribute("data-navhidden")); if ( currentScrollTop > lastScrollTop && allDataHidden[0].getAttribute("data-navhidden") === "true" ) { - console.log("DOWNNNNNNNNNNNNN"); invertDataAttributte(allDataHidden); handleClassChanges(allDataHidden); } else if ( currentScrollTop <= lastScrollTop && allDataHidden[0].getAttribute("data-navhidden") === "false" ) { - console.log("UPPPPPPPPPPPPPP", currentScrollTop, lastScrollTop); invertDataAttributte(allDataHidden); } @@ -291,7 +285,6 @@ const optimizedLogo = await getImage({ event.animationName === "navigation-animation" && allDataHidden[0].getAttribute("data-navhidden") === "true" ) { - console.log("NAV FINISHED"); handleClassChanges(allDataHidden); } }); From 4ffe6326b12a98692d3dedfe77fae24b58595fa3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ante=20Kocei=C4=87?= Date: Thu, 14 Aug 2025 19:42:02 +0200 Subject: [PATCH 4/6] Removed unused code --- apps/website/src/styles/navigation.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/apps/website/src/styles/navigation.css b/apps/website/src/styles/navigation.css index a41eb024..fe3e2a04 100644 --- a/apps/website/src/styles/navigation.css +++ b/apps/website/src/styles/navigation.css @@ -8,16 +8,6 @@ } } -/* @keyframes display-animation { - 0% { - display: none; - } - - 100% { - display: inline-block; - } -} */ - @keyframes visible-animation { 0% { visibility: hidden; From b408eaa57bf01b898433bf7835eccd4b8cb2e2b8 Mon Sep 17 00:00:00 2001 From: ivke995 Date: Wed, 20 Aug 2025 15:26:25 +0200 Subject: [PATCH 5/6] fix: navigation animation - add absolute path to book-a-call-section target url --- apps/website/src/components/BookACallForm.astro | 2 +- apps/website/src/components/navigation.astro | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/website/src/components/BookACallForm.astro b/apps/website/src/components/BookACallForm.astro index 8cd42993..e52a4bbc 100644 --- a/apps/website/src/components/BookACallForm.astro +++ b/apps/website/src/components/BookACallForm.astro @@ -53,7 +53,7 @@ const {