[Update] Config Page: Supporters: Add animation.

src-ui/app/config_page/setting_section/SettingSection.module.scss

@@ -1,6 +1,6 @@
 .scroll_container {
     width: 100%;
-    overflow-y: auto;
+    overflow-y: scroll;
     overflow-x: hidden;
 }
 

src-ui/app/config_page/setting_section/setting_box/supporters/Supporters.jsx

@@ -1,12 +1,22 @@
 import styles from "./Supporters.module.scss";
 import { SupportUsContainer } from "./support_us_container/SupportUsContainer";
 import { SupportersContainer } from "./supporters_container/SupportersContainer";
+import { useSupporters } from "@logics_configs";
+import { useEffect } from "react";
 
 export const Supporters = () => {
+    const { asyncFetchSupportersData } = useSupporters();
+
+    useEffect(() => {
+        asyncFetchSupportersData();
+    }, []);
+
     return (
         <div className={styles.container}>
             <SupportUsContainer />
-            <SupportersContainer />
+            <div className={styles.supportersWrapper}>
+                <SupportersContainer />
+            </div>
         </div>
     );
 };

src-ui/app/config_page/setting_section/setting_box/supporters/Supporters.module.scss

@@ -5,4 +5,17 @@
     justify-content: center;
     align-items: center;
     width: 100%;
+}
+.supportersWrapper {
+    opacity: 0;
+    animation: fadeIn 0.8s ease-in-out 1.6s forwards;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }

src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss

@@ -1,3 +1,44 @@
+$progress_ease: cubic-bezier(0, 1, 0.75, 1);
+
+@keyframes revealTopImg {
+    0% {
+        clip-path: inset(0 50% 0 50%);
+        opacity: 0;
+    }
+    100% {
+        clip-path: inset(0 0 0 0);
+        opacity: 1;
+    }
+}
+
+@keyframes bounceIn {
+    0% {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    60% {
+        transform: translateY(-10%);
+        opacity: 1;
+    }
+    80% {
+        transform: translateY(10%);
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes expandWidth {
+    0% {
+        transform: scaleX(0);
+    }
+    100% {
+        transform: scaleX(1);
+    }
+}
+
 .support_us_container {
     display: flex;
     flex-direction: column;
@@ -6,39 +47,56 @@
     gap: 1.4rem;
     width: 100%;
 }
+
 .support_buttons_wrapper {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 2rem;
+    gap: 1.2rem;
 }
 
 .top_img {
     width: 100%;
+    animation: revealTopImg 0.8s ease forwards;
 }
 
 .lines_container {
     display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
     gap: 3.6rem;
 }
 
-.line_basic, .line_fuwa, .line_mochi, .line_mogu {
+.line_basic,
+.line_fuwa,
+.line_mochi,
+.line_mogu {
     width: 8.6rem;
     height: 0.2rem;
+    transform: scaleX(0);
+    transform-origin: left center;
 }
 
 .line_basic {
     background-color: var(--dark_800_color);
+    animation: expandWidth 1s $progress_ease 0.4s forwards;
 }
+
 .line_fuwa {
     background-color: #5788a2;
+    animation: expandWidth 1s $progress_ease 0.6s forwards;
 }
+
 .line_mochi {
     background-color: var(--received_300_color);
+    animation: expandWidth 1s $progress_ease 0.8s forwards;
 }
+
 .line_mogu {
     background-color: var(--dark_basic_text_color);
+    animation: expandWidth 1s $progress_ease 1s forwards;
 }
 
 .support_us_button_wrapper {
@@ -52,8 +110,21 @@
 .support_button {
     position: relative;
     padding: 1.2rem 1.6rem;
+    opacity: 0;
+    transform: translateY(100%);
 }
 
+.support_button:nth-child(1) {
+    animation: bounceIn 0.4s ease-out 1.2s forwards;
+}
+.support_button:nth-child(2) {
+    animation: bounceIn 0.4s ease-out 1.4s forwards;
+}
+.support_button:nth-child(3) {
+    animation: bounceIn 0.4s ease-out 1.6s forwards;
+}
+
+
 .support_img {
     &.fanbox_logo {
         height: 1.8rem;
@@ -64,8 +135,6 @@
 }
 
 
-
-
 .spiral_top::before,
 .spiral_top::after,
 .spiral_bottom::before,
@@ -74,6 +143,7 @@
     position: absolute;
     transition-duration: 0.3s;
 }
+
 .spiral_top::before {
     background: var(--dark_800_color);
     box-shadow: 0 0 0.4rem 0 var(--dark_800_color);
@@ -116,20 +186,17 @@
     height: 0;
 }
 
-.support_button:hover
-.spiral_top::before {
+
+.support_button:hover .spiral_top::before {
     height: 100%;
 }
-.support_button:hover
-.spiral_top::after {
+.support_button:hover .spiral_top::after {
     width: 100%;
 }
-.support_button:hover
-.spiral_bottom::before {
+.support_button:hover .spiral_bottom::before {
     width: 100%;
 }
-.support_button:hover
-.spiral_bottom::after {
+.support_button:hover .spiral_bottom::after {
     height: 100%;
 }
 
@@ -141,10 +208,12 @@
     flex-direction: column;
     gap: 1rem;
 }
+
 .vrct_supporters_title {
     height: 6rem;
 }
+
 .vrct_supporters_desc {
     font-size: 1.4rem;
     text-align: start;
-}
+}

src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.jsx

@@ -1,15 +1,10 @@
 import styles from "./SupportersContainer.module.scss";
-import {  useEffect } from "react";
 import { SupportersWrapper } from "./supporters_wrapper/SupportersWrapper";
 import { useSupporters } from "@logics_configs";
 import { supporters_images_url } from "@ui_configs";
 
 export const SupportersContainer = () => {
-    const { currentSupportersData, asyncFetchSupportersData } = useSupporters();
-
-    useEffect(() => {
-        asyncFetchSupportersData();
-    }, []);
+    const { currentSupportersData } = useSupporters();
 
     if (currentSupportersData.state === "error")
         return <div>Failed to retrieve data.</div>;
@@ -17,11 +12,10 @@ export const SupportersContainer = () => {
     if (currentSupportersData.state === "pending" || currentSupportersData.data === null)
         return <div>Loading...</div>;
 
-    const supporters_settings = currentSupportersData.data.supporters_settings;
     return (
         <div className={styles.supporters_container}>
             <img className={styles.vrct_supporters_title} src={`${supporters_images_url}/vrct_supporters_title.png`} />
-            <SupportersWrapper supporters_settings={supporters_settings}/>
+            <SupportersWrapper />
             <p className={styles.vrct_supporters_desc_end}>{`みなさんのおかげで、みしゃ社長は布団で寝ることを許され(in開発室) しいなは喜び庭駆け回っています！！！ふわもちもぐもぐです！ありがとうございます。これからもまだまだ進化するVRCTをどうかよろしくお願いします！\nThanks to everyone, Misha has been granted the privilege of sleeping in a proper bed (in the development room), and Shiina is so happy, running around the yard! Fuwa-mochi-mogu-mogu! Thank you so much! We hope you'll continue to support the ever-evolving VRCT!`}</p>
         </div>
     );

src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx

@@ -42,7 +42,7 @@ const getSupportersLabelsPath = (file_name) => `${image_sets.supporters_labels}$
 const getSupportersIconsPath = (file_name) => `${image_sets.supporters_icons}${file_name}.png`;
 
 
-export const SupportersWrapper = ({supporters_settings}) => {
+export const SupportersWrapper = () => {
     const { saveScrollPosition, restoreScrollPosition } = useSettingBoxScrollPosition();
     const { currentSupportersData } = useSupporters();
 
@@ -55,6 +55,8 @@ export const SupportersWrapper = ({supporters_settings}) => {
     }, [currentSupportersData.data]);
 
 
+    const supporters_settings = currentSupportersData.data.supporters_settings;
+
     const target_supporting_month = supporters_settings.target_supporting_month;
     const calc_support_period = supporters_settings.calc_support_period;
     const chato_ex_count = supporters_settings.chato_ex_count;

src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss

@@ -1,4 +1,5 @@
 $progress_ease: cubic-bezier(0, 1, 0.75, 1);
+// Duplicated
 
 .container {
     position: absolute;