Fix animation for header logos

src/components/Header.astro

@@ -117,7 +117,7 @@ const isCombatIntern = normalizedPathName.startsWith("/combates/")
 			</div>
 			<div class="focus-within-ring -ml-[8px] -mr-[4px]">
 				<a href="/" class="focus-visible:!ring-0">
-					<HeroLogo class:list={"h-auto w-full"} id="hero-logo-header" noEffect />
+					<HeroLogo class:list={"h-auto w-full"} id="hero-logo-header" animated={false} />
 				</a>
 			</div>
 			<div

src/components/HeroLogo.astro

@@ -3,9 +3,10 @@ interface Props {
 	id: string
 	class?: string
 	noEffect?: boolean
+	animated?: boolean
 }
 
-const { id, class: classList, noEffect } = Astro.props as Props
+const { id, class: classList, noEffect, animated = true } = Astro.props as Props
 ---
 
 <svg
@@ -22,17 +23,26 @@ const { id, class: classList, noEffect } = Astro.props as Props
 			fill="currentColor"
 			stroke="currentColor"
 			d="M363.933 2.427h13.752c-.194 22.247-.391 44.491-.585 66.738 3.93-.33 7.865-.584 11.804-.759-.015 3.17-.031 6.337-.044 9.507a260.26 260.26 0 0 0-25.908 2.608zm27.126 75.386c5.26-25.343 10.382-50.319 15.354-75.383h14.68c5.195 25.3 10.53 50.99 15.956 77.529a262.327 262.327 0 0 0-13.035-1.44 19513.85 19513.85 0 0 1-10.089-58.489 7672.546 7672.546 0 0 1-9.582 57.565"
-			class="animate-fade-in-up"
+			class:list={[{ "animate-fade-in-up": animated }]}
 		>
 		</path>
 		<path
 			fill="currentColor"
 			stroke="currentColor"
 			d="M188.451 584.028V415.951c9.227-.036 18.453-.08 27.68-.116 9.563-.035 17.024 1.67 22.347 4.955 5.332 3.286 9.094 8.276 11.303 14.98 2.2 6.714 3.247 15.203 3.14 25.583-.177 17.875-.354 35.741-.541 53.617-.106 10.629-1.33 19.686-3.646 27.34-2.324 7.646-6.104 13.951-11.329 19.012-5.225 5.062-12.34 9.111-21.301 12.237a557 557 0 0 0-27.662 10.46zm20.831-28.362c2.12-.675 4.249-1.332 6.379-1.98 4.826-1.475 8.295-3.632 10.406-6.501 2.111-2.868 3.416-6.526 3.93-10.993.506-4.466.79-9.839.843-16.143l.452-58.554c.045-6.171-.248-11.117-.896-14.856-.647-3.738-2.022-6.438-4.125-8.116-2.111-1.669-5.527-2.424-10.247-2.193-2.067.098-4.143.195-6.21.302-.177 39.675-.346 79.359-.523 119.034zm49.779 4.848c.505-48.271 1.011-96.55 1.525-144.821 16.431-.044 32.861-.089 49.291-.115l-.186 17.262c-9.29.213-18.576.462-27.857.746l-.452 40.199c7.301-.675 14.611-1.288 21.93-1.838l-.186 17.227a950.984 950.984 0 0 0-21.948 2.388c-.178 15.416-.346 30.822-.515 46.238a634.993 634.993 0 0 1 28.256-4.751c-.062 5.639-.115 11.277-.177 16.925a557 557 0 0 0-49.681 10.558zm56.956-11.704c.452-44.416.905-88.824 1.348-133.241 7.151-.009 14.31-.018 21.461-.036-.32 37.997-.63 75.994-.95 113.982 9.59-.944 19.2-1.667 28.824-2.167l-.08 16.117a558 558 0 0 0-50.612 5.345zm102.76-6.02a546.992 546.992 0 0 0-20.538-.311c7.994-42.348 15.836-84.5 23.528-126.972 7.638 0 15.268 0 22.906.017 8.109 42.943 16.342 86.525 24.672 131.262a568.993 568.993 0 0 0-20.156-2.149c-5.287-33.441-10.513-66.474-15.676-99.259a17809.8 17809.8 0 0 1-14.727 97.412zm57.985 4.973c-.426-44.071-.852-88.132-1.269-132.203 4.977 0 9.954.018 14.931.027 9.794 25.582 19.633 52.071 29.454 79.9-.302-26.613-.594-53.225-.896-79.838 5.9.018 11.79.026 17.69.044.516 48.04 1.028 96.08 1.535 144.12a564.02 564.02 0 0 0-14.168-3.419c-9.883-30.209-19.802-58.873-29.694-86.454.293 26.897.577 53.794.87 80.691a561.983 561.983 0 0 0-18.453-2.868m101.9 26.124c-8.127-2.779-14.665-6.837-19.562-12.192-4.906-5.354-8.455-11.846-10.638-19.598-2.183-7.752-3.326-16.481-3.433-26.337l-.559-54.62c-.106-9.848.879-18.212 2.928-25.201 2.049-6.988 5.527-12.343 10.415-16.117 4.888-3.765 11.498-5.727 19.811-5.736 8.507 0 15.206 2.007 20.094 6.234 4.879 4.217 8.419 10.424 10.584 18.585 2.173 8.152 3.247 17.999 3.247 29.339v63.082c0 11.206-1.065 20.619-3.159 28.06-2.093 7.451-5.5 12.459-10.211 15.061-4.72 2.619-11.205 2.291-19.517-.56m-.134-20.983c3.505 1.039 6.078.799 7.719-.79 1.641-1.59 2.741-4.138 3.291-7.655.55-3.516.816-7.459.799-11.81-.107-24.57-.222-49.141-.329-73.702-.017-4.476-.328-8.525-.922-12.121-.595-3.595-1.74-6.448-3.434-8.56-1.694-2.114-4.329-3.233-7.895-3.384-3.38-.15-5.918.738-7.639 2.611-1.721 1.873-2.857 4.484-3.407 7.832-.55 3.348-.807 7.149-.771 11.402.186 23.354.381 46.708.567 70.07.036 4.131.329 8.018.879 11.66.55 3.64 1.694 6.704 3.424 9.19 1.73 2.493 4.303 4.246 7.718 5.257M48.803 425.212C33.163 323.299 17.069 214.752 0 98.009h41.156c10.734 78.16 21.14 152.91 31.37 224.713 11.01-77.797 22.276-152.565 33.668-224.713h42.095c-18.532 97.394-36.977 199.947-54.933 309.24a887.007 887.007 0 0 0-44.553 17.954zm102.583-37.259 4.418-289.944h106.823l-.452 34.08c-20.157.427-40.304.942-60.425 1.564-.417 26.621-.825 53.234-1.242 79.856 15.862-1.563 31.76-2.94 47.685-4.129-.16 11.348-.319 22.687-.47 34.036a1558.978 1558.978 0 0 0-47.756 5.39c-.479 30.618-.949 61.235-1.429 91.844a989.994 989.994 0 0 1 61.676-10.7c-.142 11.135-.293 22.279-.435 33.414a881.001 881.001 0 0 0-108.384 24.589zm116.706-25.894 3.327-264.05h46.496c-.657 75.22-1.322 150.433-1.978 225.654a1014.998 1014.998 0 0 1 39.913-2.566c-.053 10.717-.106 21.427-.151 32.144a880.001 880.001 0 0 0-87.598 8.818zm139.959-9.892a882.002 882.002 0 0 0-44.917.737c17.787-85.69 35.105-170.137 51.917-254.886h49.636c17.566 85.548 35.602 172.41 53.949 262.141a886.994 886.994 0 0 0-44.074-4.866c-11.587-66.688-22.969-132.452-34.112-197.763-10.566 65.072-21.363 129.788-32.399 194.637m118.454 9.093-3.22-263.251h49.849c20.733 0 36.968 3.037 48.688 9.457 11.728 6.393 20.147 16.41 25.266 30.014 5.119 13.595 7.834 30.91 8.145 51.636l1.596 107.01c.32 21.223-1.872 38.326-6.565 51.059-4.693 12.761-12.677 20.859-24.015 24.562-11.338 3.73-27.023 2.975-47.162-1.225a885 885 0 0 0-52.6-9.271zm46.78-26.329c1.34.24 2.679.48 4.028.72 10.797 1.953 18.471 1.482 23.048-1.705 4.569-3.179 7.32-8.64 8.251-16.366.932-7.734 1.304-17.369 1.127-28.886-.559-35.697-1.118-71.385-1.668-107.082-.178-11.286-1.056-20.432-2.626-27.394-1.579-6.97-4.702-12.139-9.36-15.495-4.666-3.357-12.136-5.16-22.409-5.426-1.118-.026-2.236-.062-3.354-.088l2.981 201.731zm122.881 68.499a879 879 0 0 0-43.196-14.19c15.428-92.012 30.803-188.572 46.496-291.24h49.637A10360.005 10360.005 0 0 1 800 448.238a874.997 874.997 0 0 0-40.952-19.571 14400.99 14400.99 0 0 0-33.712-256.6c-9.901 80.131-19.58 157.092-29.179 231.363zm-178.648 2.46c-2.608 0-4.933-.862-6.955-2.593a976.906 976.906 0 0 1-5.802-4.982c-1.837-1.589-3.771-2.388-5.802-2.388-2.032 0-3.265.728-3.984 2.175-.727 1.457-1.091 3.561-1.091 6.332h-10.149c0-4.982.364-9.44 1.091-13.382.728-3.943 2.005-7.06 3.841-9.342 1.836-2.282 4.303-3.428 7.391-3.428 2.413 0 4.586.8 6.52 2.389a669.125 669.125 0 0 1 5.722 4.769c1.881 1.589 3.842 2.388 5.873 2.388 1.642 0 2.831-.692 3.549-2.078.728-1.385 1.091-3.454 1.091-6.224h9.573c0 4.289-.24 8.435-.728 12.449-.488 4.014-1.526 7.335-3.114 9.963-1.595 2.629-3.94 3.943-7.035 3.943zM406.29 587.948l7.193 3.538c2.103 1.03 3.312 3.31 3.032 5.632l-4.599 36.65-11.018-41.99-17.591-2.395 1.538 4.966-26.617 7.953 6.339 3.365c2.551 1.361 4.158 4.025 4.135 6.902l-.11 45.003a23.68 23.68 0 0 1-6.672 16.382l-2.912 3.016 31.365-9.472-2.083.124c-2.109.151-3.894-1.524-3.912-3.638l-.486-55.658a3.19 3.19 0 0 1 1.797-2.917l2.244-1.086 18.129 58.541 21.824-6.505c-1.812-.138-3.067-.925-3.889-1.755-.966-.979-1.382-2.526-1.148-3.889l10.076-57.079a26.1 26.1 0 0 1 3.958-9.916l4.119-6.233-34.703 10.452z"
-			class="animate-fade-in-up"
 		>
 		</path>
 	</symbol>
-	{noEffect && <use href="#hero-logo-header" class="text-[#f1ffaa]/70 blur-xl md:blur-md" />}
-	<use href="#hero-logo-header" class:list={noEffect ? "text-white" : "text-primary"}></use>
+	{
+		noEffect && (
+			<use
+				href="#hero-logo-header"
+				class:list={["text-[#f1ffaa]/70 blur-xl md:blur-md", animated ? "animate-fade-in-up" : ""]}
+			/>
+		)
+	}
+	<use
+		href="#hero-logo-header"
+		class:list={[noEffect ? "text-white" : "text-primary", animated ? "animate-fade-in-up" : ""]}
+	></use>
 </svg>

src/sections/Hero.astro

@@ -34,7 +34,7 @@ import HeroLogo from "@/components/HeroLogo.astro"
 			class="absolute inset-0 -z-10 m-auto w-full rounded-full bg-black/50 blur-2xl md:size-[400px]"
 		>
 		</div>
-		<HeroLogo class="h-auto w-[250px] overflow-visible md:w-[500px]" id="hero-logo-main" />
+		<HeroLogo class="h-auto w-[250px] overflow-visible md:w-[500px]" id="hero-logo-main" noEffect />
 	</div>
 </section>
 <style>