cool transitions

Author: InfinityLoop1

public/assets/js/index.js

@@ -104,8 +104,17 @@ window.addEventListener('resize', () => {
 
 document.querySelectorAll('input[type="radio"][name="creator-radio"]').forEach(radio => {
     radio.addEventListener('change', function () {
-        document.getElementsByClassName('shown-creator-container')[0].classList.remove('shown-creator-container');
+        document.getElementById('creator-popup').style.opacity = '0';
+        document.getElementById('creator-popup').style.transform = 'translate(-50%, calc(-50% + 10px))';
+        
+        setTimeout(() => {
+            document.getElementsByClassName('shown-creator-container')[0].classList.remove('shown-creator-container');
         document.getElementById('add-' + this.value + '-container').classList.add('shown-creator-container');
+            document.getElementById('creator-popup').style.opacity = '1';
+        document.getElementById('creator-popup').style.transform = 'translate(-50%, -50%)';
+        }, 500);
+
+        
     });
 });
 

public/assets/styles/css/index.css

@@ -138,14 +138,14 @@
     left: 50%;
     transform: translate(-50%, -50%);
     width: 75vw;
-    min-height: 50vh;
     background-color: $background-card;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     z-index: 1000;
     padding: 20px;
     flex-direction: column;
     gap: 10px;
+    transition: all 0.5s ease-in-out;
 
     #creator-popup-buttons {
         display: flex;
@@ -190,10 +190,13 @@
     width: 100%;
     height: 100%;
     box-sizing: border-box;
+    transition-duration: 0.5s;
 }
 
 .shown-creator-container {
     display: flex;
+    opacity: 1;
+    height: auto;
 }
 
 #add-homework-container {
@@ -203,6 +206,7 @@
     flex-grow: 1;
     justify-content: space-between;
     align-items: stretch;
+    gap: 10px;
 
     input {
         width: 100%;
@@ -292,6 +296,7 @@
     #class-builder {
         display: flex;
         flex-direction: row;
+        gap: 10px;
 
         #class-info {
             flex: 1;
@@ -321,6 +326,7 @@
             align-items: center;
             justify-content: center;
             flex-direction: column;
+            gap: 10px;
 
             #class-emoji {
                 display: flex;
@@ -397,6 +403,7 @@
     padding: 0.25rem;
     font-size: 14px;
     gap: 10px;
+    transition-duration: 0.5s;
 }
 
 .radio-inputs .radio {
@@ -417,7 +424,7 @@
     border: none;
     padding: 0.5rem 0;
     color: $text-primary;
-    transition: all 0.15s ease-in-out;
+    transition: all 0.5s ease-in-out;
 }
 
 .radio-inputs .radio input:checked + .name {

public/assets/styles/css/schedule.css

@@ -3,23 +3,6 @@ body {
     overflow-x: hidden;
 }
 
-#add-schedule-button {
-    position: sticky;
-    width: 100vw;
-    top: 0;
-    left: 0;
-    background-color: #202020;
-    font-family: "Outfit", sans-serif;
-    transition-duration: 0.5s;
-
-    &:hover {
-        background-color: #303030;
-        font-size: 150%;
-        width: 75vw;
-        left: 12.5vw;
-    }
-}
-
 #schedule-container {
     padding: 10px;
     width: 100vw;