animation update

packages/fakeyou/src/data/animation.ts

@@ -20,16 +20,16 @@ export const container = {
 };
 
 export const item = {
-  visible: { opacity: 1, y: 0 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
   hidden: { opacity: 0, y: 50 },
 };
 
 export const image = {
-  visible: { opacity: 1, x: 0, transition: { delay: 0.1 } },
+  visible: { opacity: 1, x: 0, transition: { duration: 0.4 } },
   hidden: { opacity: 0, x: 100 },
 };
 
 export const panel = {
-  visible: { opacity: 1, y: 0, transition: { delay: 0.25 } },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
   hidden: { opacity: 0, y: 50 },
 };

packages/fakeyou/src/v2/view/patrons/PatronPage.tsx

@@ -6,9 +6,9 @@ import { PATRONS } from "../../../data/Patrons";
 import { PatreonLink } from "@storyteller/components/src/elements/PatreonLink";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPatreon } from "@fortawesome/free-brands-svg-icons";
-import { distance, delay, delay2, duration } from "../../../data/animation";
+import { container, item, panel, image } from "../../../data/animation";
+import { motion } from "framer-motion";
 import { USE_REFRESH } from "../../../Refresh";
-const Fade = require("react-reveal/Fade");
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -78,85 +78,81 @@ function PatronPage(props: Props) {
   }
 
   return (
-    <div>
+    <motion.div initial="hidden" animate="visible" variants={container}>
       <div className="container py-5 pt-lg-0">
         <div className="row">
-          <Fade bottom cascade duration={duration} distance={distance}>
-            <div className="col-12 col-lg-7 d-flex flex-column justify-content-center text-center text-lg-start px-3 px-md-2 px-lg-5 px-xl-3">
-              <h1 className="display-5 fw-bold">Thanks to our Patrons!</h1>
-              <h3 className="mb-4 px-4 px-md-0">
-                Our Patrons help support our work.
-              </h3>
-              <p className="lead mb-5">
-                Our Patrons help pay offset (but not completely cover) our
-                expensive server bills.
-              </p>
+          <div className="col-12 col-lg-7 d-flex flex-column justify-content-center text-center text-lg-start px-3 px-md-2 px-lg-5 px-xl-3">
+            <motion.h1 className="display-5 fw-bold" variants={item}>
+              Thanks to our Patrons!
+            </motion.h1>
+            <motion.h3 className="mb-4 px-4 px-md-0" variants={item}>
+              Our Patrons help support our work.
+            </motion.h3>
+            <motion.p className="lead mb-5" variants={item}>
+              Our Patrons help pay offset (but not completely cover) our
+              expensive server bills.
+            </motion.p>
+
+            <motion.div variants={item}>
+              <a
+                href="https://www.patreon.com/fakeyou"
+                target="_blank"
+                rel="noreferrer"
+                className="btn btn-primary"
+              >
+                <FontAwesomeIcon icon={faPatreon} className="me-2" />
+                Support us on Patreon
+              </a>
+            </motion.div>
+          </div>
 
-              <div>
-                <a
-                  href="https://www.patreon.com/fakeyou"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="btn btn-primary"
-                >
-                  <FontAwesomeIcon icon={faPatreon} className="me-2" />
-                  Support us on Patreon
-                </a>
-              </div>
-            </div>
-          </Fade>
           <div className="col-12 col-lg-5 d-flex flex-column align-items-center">
-            <Fade right distance={distance} delay={delay} duration={duration}>
-              <img
-                className="img-fluid mt-5 mw-50"
-                src="/mascot/kitsune_pose7.webp"
-                alt="FakeYou Mascot"
-                width="560"
-              />
-            </Fade>
+            <motion.img
+              className="img-fluid mt-5 mw-50"
+              src="/mascot/kitsune_pose7.webp"
+              alt="FakeYou Mascot"
+              width="560"
+              variants={image}
+            />
           </div>
         </div>
       </div>
 
-      <div className="container-panel pb-5">
-        <Fade bottom distance={distance} delay={delay2} duration={duration}>
-          <div className="panel p-3 p-lg-4">
-            <h1 className="panel-title fw-bold">Our Patrons</h1>
-            <div className="py-6">
-              <div className="row text-center">
-                <ul className="patrons-list col-12 col-md-4 w-100">
-                  {PATRONS.map((patron) => {
-                    return (
-                      <li>
-                        {patron.username} &mdash; ${patron.donationTotal}
-                      </li>
-                    );
-                  })}
-                </ul>
-                <div className="col-12 col-md-4"></div>
-                <div className="col-12 col-md-4"></div>
-              </div>
+      <motion.div className="container-panel pb-5" variants={panel}>
+        <div className="panel p-3 p-lg-4">
+          <h1 className="panel-title fw-bold">Our Patrons</h1>
+          <div className="py-6">
+            <div className="row text-center">
+              <ul className="patrons-list col-12 col-md-4 w-100">
+                {PATRONS.map((patron) => {
+                  return (
+                    <li>
+                      {patron.username} &mdash; ${patron.donationTotal}
+                    </li>
+                  );
+                })}
+              </ul>
+              <div className="col-12 col-md-4"></div>
+              <div className="col-12 col-md-4"></div>
             </div>
           </div>
-        </Fade>
-      </div>
+        </div>
+      </motion.div>
 
-      <div className="container pb-5">
-        <Fade bottom distance={distance} delay={delay2} duration={duration}>
-          <div>
-            <p>
-              Patrons will get first looks at new features, get dedicated access
-              to Patron-only Discord channels, can ask for specific voices from
-              our in-house audio engineers, and more!
-              <br />
-              <br />
-              Please consider{" "}
-              <PatreonLink text="donating on Patreon" iconAfterText={true} />
-            </p>
-          </div>
-        </Fade>
-      </div>
-    </div>
+      <motion.div className="container pb-5" variants={panel}>
+        <div>
+          <p>
+            Patrons will get first looks at new features, get dedicated access
+            to Patron-only Discord channels, can ask for specific voices from
+            our in-house audio engineers, and more!
+            <br />
+            <br />
+            Please consider{" "}
+            <PatreonLink text="donating on Patreon" iconAfterText={true} />
+          </p>
+        </div>
+      </motion.div>
+    </motion.div>
   );
 }