From e2c7c02a9c115fa8ae5aec9c31cfa28dd06b26a4 Mon Sep 17 00:00:00 2001
From: Eamonn de Leastar <edeleastar@wit.ie>
Date: Thu, 28 Nov 2024 12:43:01 +0000
Subject: [PATCH] animation effect

---
 src/routes/(home)/CourseList.svelte      | 13 +++++++------
 src/routes/(home)/CourseVisitCard.svelte |  5 ++++-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/routes/(home)/CourseList.svelte b/src/routes/(home)/CourseList.svelte
index 2e7c064c..830e3a59 100644
--- a/src/routes/(home)/CourseList.svelte
+++ b/src/routes/(home)/CourseList.svelte
@@ -30,18 +30,19 @@
 <div class="card container mx-auto my-1 p-4">
   <p class="p-4 text-2xl">Favourites</p>
   <div class="mx-auto grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
-    {#each courseVisits as courseVisit}
-      {#if courseVisit.favourite}
+    {#each courseVisits.filter((cv) => cv.favourite) as courseVisit (courseVisit.id)}
+      <div animate:flip={{ duration: 300 }}>
         <CourseVisitCard {courseVisit} {deleteCourse} {starUnstarCourse} />
-      {/if}
+      </div>
     {/each}
   </div>
+
   <p class="p-4 text-2xl">Recently accessed</p>
   <div class="mx-auto grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
-    {#each courseVisits as courseVisit}
-      {#if !courseVisit.favourite}
+    {#each courseVisits.filter((cv) => !cv.favourite) as courseVisit (courseVisit.id)}
+      <div animate:flip={{ duration: 300 }}>
         <CourseVisitCard {courseVisit} {deleteCourse} {starUnstarCourse} />
-      {/if}
+      </div>
     {/each}
   </div>
 </div>
diff --git a/src/routes/(home)/CourseVisitCard.svelte b/src/routes/(home)/CourseVisitCard.svelte
index 5f44aea1..d099d5a8 100644
--- a/src/routes/(home)/CourseVisitCard.svelte
+++ b/src/routes/(home)/CourseVisitCard.svelte
@@ -1,10 +1,13 @@
 <script>
   import Iconify from "@iconify/svelte";
+  import { cubicIn, cubicOut } from "svelte/easing";
+  import { fade, scale } from "svelte/transition";
 
-  let { courseVisit, deleteCourse, starUnstarCourse } = $props(); // Using prop rune syntax
+  let { courseVisit, deleteCourse, starUnstarCourse } = $props();
 </script>
 
 <div
+  transition:scale|local={{ duration: 300, start: 0.8, easing: cubicOut }}
   class="to-accent-50 dark:to-accent-900 card card-hover from-primary-50 dark:from-primary-900 m-2 border bg-gradient-to-l p-2"
 >
   <div class="flex justify-between">