From 9c27bf143a740897639ac8cca80074f688d24af1 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Sun, 27 Apr 2025 20:49:45 +0200
Subject: [PATCH] Index: Added basic animation for "Photographie"

---
 src/lib/components/navbar.svelte | 10 -------
 src/routes/+page.svelte          | 50 +++++++++++++++++++-------------
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index f194673..a0e1e2d 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -15,7 +15,6 @@
 	let cursorX;
 	let cursorY;
 
-	let navbar_title;
 	let navbar_category;
 
 	function isActive(str, url) {
@@ -73,15 +72,6 @@
 		class={scrollY < SCROLL
 			? "disabled"
 			: "navbar-height flex-row container"}
-		on:mousemove={(event) => {
-			update_gradient(event, navbar_title);
-		}}
-		on:mouseenter={() => {
-			animateForeground(true, navbar_title);
-		}}
-		on:mouseleave={() => {
-			animateForeground(false, navbar_title);
-		}}
 	>
 		<div class="navbar-title navbar-content">
 			<h1 class="title">Etheryo</h1>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4695358..f07a350 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,6 +8,7 @@
 	import Git from "$lib/components/git.svelte";
 	import HoverCard from "$lib/components/hover-card.svelte";
 
+	import anime from "animejs";
 	import topics from "$lib/ts/topic.ts";
 	import { filterPhotos } from "$lib/ts/photo.ts";
 
@@ -16,23 +17,36 @@
 
 	let photoList = filterPhotos(hubjson.photos);
 	$: index = 0;
+	let photoDiv;
+	let tempPhotoDiv;
 
-	function swipeCanva(event, canva) {
-		const id = index;
+	function updateIndex(advance) {
+		if (advance && index < photoList.length - 1) {
+			index++;
+		} else if (!advance && index >= 1) {
+			index--;
+		}
+	}
+
+	function swipeCanva(advance) {
 		const width = window.innerWidth / 2;
-		const animTranslate = active > id ? [width, -width] : [-width, width];
+		const animTranslate = advance ? [-width, width] : [width, -width];
+
+		// Checking if we can play the animation
+		if (!((advance && index < photoList.length - 1) || (!advance && index >= 1)))
+			return;
 
 		anime({
-			targets: pageDiv,
+			targets: photoDiv,
 			translateX: animTranslate[0],
 			opacity: 0,
 			duration: 300,
 			easing: "easeInQuad",
 			complete: function () {
-				active = id;
-				pageDiv.style.transform = `translateX(${animTranslate[1]}px)`;
+				updateIndex(advance);
+				photoDiv.style.transform = `translateX(${animTranslate[1]}px)`;
 				anime({
-					targets: pageDiv,
+					targets: photoDiv,
 					translateX: 0,
 					opacity: 1,
 					duration: 300,
@@ -94,7 +108,7 @@
 		<h1>{hubjson.photo.title}</h1>
 		<p>{hubjson.photo.description}</p>
 	</div>
-	<div class="flex w-100 justify-center">
+	<div class="flex w-100 justify-center" bind:this={photoDiv}>
 		{#each photoList[index] as photo}
 			<HoverCard
 				picture={photo.urlcompressed}
@@ -105,16 +119,12 @@
 			/>
 		{/each}
 	</div>
-	<button
-		on:click={() => {
-			if (index >= 1) index--;
-			
-
-		}}>&lt;</button
-	>
-	<button
-		on:click={() => {
-			if (index < photoList.length - 1) index++;
-		}}>&gt;</button
-	>
+	<!-- Just to load the next picture -->
+	<div class="flex w-100 justify-center disabled" bind:this={tempPhotoDiv}>
+		{#each photoList[index + 1] as photo}
+			<img alt="nothing" src={photo.urlcompressed} />
+		{/each}
+	</div>
+	<button on:click={() => swipeCanva(false)}>&lt;</button>
+	<button on:click={() => swipeCanva(true)}>&gt;</button>
 </div>