better animations | remember home page tab

6 files changed, 80 insertions, 26 deletions

diff --git a/static/css/main.css b/static/css/main.css
index 33882fe..3ce35aa 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2039,6 +2039,10 @@ video {
   transition-timing-function: linear;
 }
 
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
 /* Hide scrollbar for Chrome, Safari and Opera */
 
 .no-scrollbar::-webkit-scrollbar {
diff --git a/templates/home/index.html b/templates/home/index.html
index 275a36b..d5b29fd 100644
--- a/templates/home/index.html
+++ b/templates/home/index.html
@@ -3,6 +3,26 @@
 {% block css %}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+<style>
+  @keyframes fadeInUp {
+      from {
+          opacity: 0;
+          transform: translate3d(0, 20px, 0);
+      }
+      to {
+          opacity: 1;
+          transform: translate3d(0, 0, 0);
+      }
+  }
+  
+  .anime-item {
+      opacity: 0;
+  }
+  
+  .anime-item.fade-in {
+      animation: fadeInUp 0.5s ease-out forwards;
+  }
+</style>
 {% endblock css %} 
 {% block content %}
 <!-- Swiper: Trending Anime -->
@@ -158,7 +178,7 @@
       </button>      
     </section>
     <!-- Data Cards: Trending Anime -->
-    <section id="trending" class="flex flex-wrap justify-center mt-4 animate__animated animate__slideInUp max-w-full">
+    <section id="trending" class="flex flex-wrap justify-center mt-4 max-w-full">
       {% if user.preferences.card_layout == 'classic' %}
       {% include "partials/datacard_render.html" with data=trending_anime %}
       {% elif user.preferences.card_layout == 'wide' %}
@@ -168,7 +188,7 @@
       {% endif %}
     </section>
     <!-- Data Cards: Popular Anime -->
-    <section id="popular" class="flex-wrap justify-center mt-4 hidden animate__animated animate__slideInUp max-w-full">
+    <section id="popular" class="flex-wrap justify-center mt-4 hidden max-w-full">
       {% comment %} {% include "partials/datacard_render.html" with data=popular_anime %} {% endcomment %}
       {% if user.preferences.card_layout == 'classic' %}
       {% include "partials/datacard_render.html" with data=popular_anime %}
@@ -179,7 +199,7 @@
       {% endif %}
     </section>
     <!-- Data Cards: Top Rated Anime -->
-    <section id="top_rated" class="flex-wrap justify-center mt-4 hidden animate__animated animate__slideInUp max-w-full">
+    <section id="top_rated" class="flex-wrap justify-center mt-4 hidden max-w-full">
       {% comment %} {% include "partials/datacard_render.html" with data=top_anime %} {% endcomment %}
       {% if user.preferences.card_layout == 'classic' %}
       {% include "partials/datacard_render.html" with data=top_anime %}
@@ -193,12 +213,12 @@
   <section class="w-full xl:w-1/4 px-4 py-2">
     <h2 class="text-2xl font-bold text-white uppercase">Top Airing</h2>
     <!-- Wide Cards: Upcoming -->
-    <section class="flex flex-col gap-4 mt-4 animate__animated animate__slideInUp">
+    <section class="flex flex-col gap-4 mt-4">
       {% include "partials/sidebarwidecard_render.html" with data=top_airing_anime %}
     </section>
     <h2 class="text-2xl font-bold text-white uppercase mt-4">Upcoming {{ next_season }}</h2>
     <!-- Wide Cards: Upcoming -->
-    <section class="flex flex-col gap-4 mt-4 animate__animated animate__slideInUp">
+    <section class="flex flex-col gap-4 mt-4">
       {% include "partials/sidebarwidecard_render.html" with data=upcoming_anime %}
     </section>
   </section>
@@ -237,24 +257,54 @@
   });
 </script>
 <script>
-  const categorySwitch = document.querySelectorAll(".category-switch");
-  categorySwitch.forEach((button) => {
-    button.addEventListener("click", () => {
-      categorySwitch.forEach((button) => {
-        button.classList.remove("active-category");
-        button.classList.remove("bg-{{ user.preferences.accent_colour }}-600");
-      });
-      button.classList.add("active-category");
-      button.classList.add("bg-{{ user.preferences.accent_colour }}-600");
+  document.addEventListener('DOMContentLoaded', function() {
+    const categorySwitch = document.querySelectorAll(".category-switch");
+    const sections = ["trending", "popular", "top_rated"];
+    
+    function applyFadeInEffect(sectionId) {
+        const animeItems = document.querySelectorAll(`#${sectionId} .anime-item`);
+        animeItems.forEach((item, index) => {
+            item.classList.remove('fade-in');
+            item.style.animationDelay = `${index * 0.1}s`;
+            // Use setTimeout to trigger a reflow and apply the animation
+            setTimeout(() => {
+                item.classList.add('fade-in');
+            }, 10);
+        });
+    }
 
-      const target = button.getAttribute("data-target");
-      const sections = [document.getElementById("trending"), document.getElementById("popular"), document.getElementById("top_rated")];
-      sections.forEach((section) => {
-        section.classList.add("hidden");
-        section.classList.remove("flex");
-      });
-      document.getElementById(target).classList.remove("hidden");
-      document.getElementById(target).classList.add("flex");
+    function switchCategory(category) {
+        sections.forEach((sectionId) => {
+            const section = document.getElementById(sectionId);
+            if (sectionId === category) {
+                section.classList.remove("hidden");
+                section.classList.add("flex");
+                applyFadeInEffect(sectionId);
+            } else {
+                section.classList.add("hidden");
+                section.classList.remove("flex");
+            }
+        });
+
+        categorySwitch.forEach((button) => {
+            button.classList.remove("active-category", "bg-{{ user.preferences.accent_colour }}-600");
+            if (button.getAttribute("data-target") === category) {
+                button.classList.add("active-category", "bg-{{ user.preferences.accent_colour }}-600");
+            }
+        });
+
+        localStorage.setItem("activeCategory", category);
+    }
+
+    // Initial setup
+    const activeCategory = localStorage.getItem("activeCategory") || "trending";
+    switchCategory(activeCategory);
+
+    categorySwitch.forEach((button) => {
+        button.addEventListener("click", () => {
+            const target = button.getAttribute("data-target");
+            switchCategory(target);
+        });
     });
   });
 </script>
diff --git a/templates/partials/datacard_render.html b/templates/partials/datacard_render.html
index 00fae91..81a5d34 100644
--- a/templates/partials/datacard_render.html
+++ b/templates/partials/datacard_render.html
@@ -1,6 +1,6 @@
 {% for anime in data %}
 {% if not anime.status == "Not yet aired"%}
-<a href="{% url "watch:watch" anime.id %}" class="w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6 text-gray-500 p-1 sm:p-2 mb-4 hover:text-white flex flex-col">
+<a href="{% url "watch:watch" anime.id %}" class="w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6 text-gray-500 p-1 sm:p-2 mb-4 hover:text-white flex flex-col anime-item opacity-0">
     <div class="relative pt-[140%]">
         <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="absolute top-0 left-0 w-full h-full rounded-lg object-cover"/>
     </div>
diff --git a/templates/partials/datacardcompact_render.html b/templates/partials/datacardcompact_render.html
index 4aecc1c..3a2e297 100644
--- a/templates/partials/datacardcompact_render.html
+++ b/templates/partials/datacardcompact_render.html
@@ -1,6 +1,6 @@
 {% for anime in data %}
 {% if not anime.status == "Not yet aired"%}
-<div class="w-full max-w-full px-2 mb-2">
+<div class="w-full max-w-full px-2 mb-2 anime-item">
     <a href="{% url 'watch:watch' anime.id %}">
     <div class="flex flex-row bg-neutral-950 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 p-2 gap-4 items-center">
         <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-16 lg:w-12 h-24 lg:h-16 object-cover"/>
diff --git a/templates/partials/datacardwide_render.html b/templates/partials/datacardwide_render.html
index 827270b..7b022cf 100644
--- a/templates/partials/datacardwide_render.html
+++ b/templates/partials/datacardwide_render.html
@@ -1,7 +1,7 @@
 {% load custom_filters %}
 {% for anime in data %}
 {% if not anime.status == "Not yet aired"%}
-<div class="w-full lg:w-1/2 px-2 mb-2">
+<div class="w-full lg:w-1/2 px-2 mb-2 anime-item">
     <div class="flex flex-row w-full bg-neutral-950 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 p-2 gap-4">
         <div class="flex flex-col gap-2 min-w-32">
             <a href="{% url 'watch:watch' anime.id %}"><img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-32 h-48 object-cover"/></a>
diff --git a/templates/partials/sidebarwidecard_render.html b/templates/partials/sidebarwidecard_render.html
index 385b75e..7d7f8f9 100644
--- a/templates/partials/sidebarwidecard_render.html
+++ b/templates/partials/sidebarwidecard_render.html
@@ -1,5 +1,5 @@
 {% for anime in data %}
-<a href="{% url "watch:watch" anime.id %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
+<a href="{% url "watch:watch" anime.id %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 animate__animated animate__fadeInUp">
     <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-32 h-auto object-cover"/>
     <div class="flex flex-col gap-2">
     <span class="text-sm font-bold flex gap-1 flex-row items-start">