From f056f8680355accf2ad41baa45479920cc3db2c1 Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com>
Date: Wed, 16 Oct 2024 13:18:08 -0400
Subject: [PATCH] Change animation to fade/slide

---
 css/carousel.css    | 31 +++++++++++++++++++++++++++++--
 scripts/carousel.js | 15 +++++++++------
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/css/carousel.css b/css/carousel.css
index 6e38de6..e109505 100644
--- a/css/carousel.css
+++ b/css/carousel.css
@@ -10,12 +10,13 @@
 
 .screenshot {
   position: relative;
-  /* animation: lower 100ms forwards; */
+  /* transition: bottom 400ms; */
 }
 
 .screenshot:nth-child(3) {
   z-index: 4;
   left: -200%;
+  cursor: pointer;
 }
 
 .screenshot:nth-child(2) {
@@ -29,7 +30,7 @@
   bottom: 20px;
 }
 
-@keyframes lower {
+/* @keyframes lower {
   from {
     animation-timing-function: ease-in-out;
   }
@@ -50,4 +51,30 @@
     transform: translate(30px, -30px) rotate(0deg);
     z-index: 0;
   }
+} */
+
+@keyframes fade-out {
+  0% {
+    /* z-index: 3; */
+    bottom: 0;
+    opacity: 1;
+  }
+  100% {
+    /* z-index: 0; */
+    opacity: 0;
+    bottom: -30px;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    /* z-index: 3; */
+    bottom: 0;
+    opacity: 10px;
+  }
+  100% {
+    /* z-index: 0; */
+    opacity: 1;
+    bottom: 20px;
+  }
 }
\ No newline at end of file
diff --git a/scripts/carousel.js b/scripts/carousel.js
index f04cbaa..68abe59 100644
--- a/scripts/carousel.js
+++ b/scripts/carousel.js
@@ -1,9 +1,6 @@
-let timing = 2000;
-
-// let stack = document.querySelector(".stack");
+let timing = 400;
 let stacks = document.getElementsByClassName('stack');
 
-// [...stack.children].reverse().forEach(i => stack.append(i));
 for (let i = 0; i < stacks.length; i++) {
     [...stacks[i].children].reverse().forEach(j => stacks[i].append(j));
     stacks[i].addEventListener("click", swap);
@@ -12,10 +9,16 @@ for (let i = 0; i < stacks.length; i++) {
 function swap(e) {
     let thisTarget = e.target
     if (!thisTarget.classList.contains('screenshot')) return;
-    thisTarget.style.animation = `swap ${timing}ms ease-in-out forwards`;
+    thisTarget.style.animation = `fade-out ${timing}ms ease-in forwards`;
 
     setTimeout(() => {
-        thisTarget.style.animation = "";
+        thisTarget.style.animation = `fade-in ${timing}ms ease-out forwards`;
         this.prepend(thisTarget);
+        // thisTarget.style = '';
+
     }, timing);
+
+    setTimeout(() => {
+        thisTarget.style = '';
+    }, 2*timing);
 }
\ No newline at end of file