update: animation timing adjustments and decoupling

HackAtUCI · Nov 3, 2023 · b37571b · b37571b
1 parent 48ce9a8
commit b37571b
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 49 deletions.
diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
@@ -13,7 +13,9 @@
  width: 238px;
  height: 60px;
  position: absolute;
- top: -12.5%;
+ top: 3%;
+ left: 12%;
+ z-index: 10;
 }
 
 .container {

diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import { Variants, motion, AnimatePresence } from "framer-motion";
+import { Variants, motion, AnimatePresence, cubicBezier } from "framer-motion";
 import openNewWindow from "@/assets/icons/open-new-window.svg";
 import styles from "./ResourceCard.module.scss";
 
@@ -19,16 +19,21 @@ interface ResourceCardProps {
 
 const variant: Variants = {
  initial: {
- scale: 3,
+ scale: 1.1,
  opacity: 0,
+ rotateX: 20,
+ translateY: 30,
  },
  animate: {
  scale: 1,
+ rotateX: 0,
  opacity: 1,
+ translateY: 0,
  transition: {
- delay: 0.2,
- duration: 0.5,
+ duration: 0.85,
  staggerChildren: 0.1,
+ staggerDirection: -1,
+ ease: cubicBezier(0.33, 1, 0.68, 1),
  },
  },
 };
@@ -42,56 +47,72 @@ export default function ResourceCard({
 }: ResourceCardProps) {
  return (
  <AnimatePresence mode="wait">
- <motion.div
- variants={variant}
- initial="initial"
- whileInView="animate"
- viewport={{ once: true }}
- className={styles.group}
- style={{
- backgroundColor: `${stickyNoteColor}`,
- }}
- >
+ <motion.div style={{ position: "relative" }}>
+ <motion.div
+ initial={{
+ scale: 1.1,
+ opacity: 0,
+ rotateX: 15,
+ }}
+ whileInView={{
+ scale: 1,
+ rotateX: 0,
+ opacity: 1,
+ transition: {
+ delay: 0.4,
+ duration: 0.5,
+ ease: cubicBezier(0.33, 1, 0.68, 1),
+ },
+ }}
+ className={styles.tape}
+ ></motion.div>
  <motion.div
- className={styles.container + " text-center px-3"}
  variants={variant}
+ initial="initial"
+ whileInView="animate"
+ viewport={{ once: true }}
+ className={styles.group}
+ style={{
+ backgroundColor: `${stickyNoteColor}`,
+ }}
  >
- <motion.div className={styles.tape} variants={variant}></motion.div>
- {stickerSrc && (
- <motion.img
- src={stickerSrc}
- alt="Resource logo"
- width="100"
- variants={variant}
- />
- )}
- <motion.h3 variants={variant}>{title}</motion.h3>
- {description}
- </motion.div>
+ <div className={styles.container + " text-center px-3"}>
+  {stickerSrc && (
+  <motion.img
+  src={stickerSrc}
+  alt="Resource logo"
+  width="100"
+  variants={variant}
+  />
+  )}
+  <h3>{title}</h3>
+  {description}
+  </div>
 
- {links.map(({ text, link }) => (
- <motion.a
- key={link}
- href={link}
- target="_blank"
- rel="noopener noreferrer"
- className={styles.tag}
- variants={variant}
- >
- {text}
- <motion.div
- className="d-inline ms-1 vertical-align-middle"
+ {links.map(({ text, link }) => (
+ <motion.a
+ key={link}
+ href={link}
+ target="_blank"
+ rel="noopener noreferrer"
+ className={styles.tag}
  variants={variant}
  >
- <Image
- src={openNewWindow}
- width="20"
- height="20"
- alt="Open link in new window"
- />
- </motion.div>
- </motion.a>
- ))}
+ {text}
+ <motion.div
+ className="d-inline ms-1 vertical-align-middle"
+ variants={variant}
+ >
+ <Image
+ src={openNewWindow}
+ width="20"
+ height="20"
+ alt="Open link in new window"
+ />
+ </motion.div>
+ </motion.a>
+ ))}
+ </motion.div>
  </motion.div>
  </AnimatePresence>
  );