update: on scroll view animation

HackAtUCI · Nov 2, 2023 · d39e0e9 · d39e0e9
1 parent 9214689
commit d39e0e9
Showing 1 changed file with 48 additions and 44 deletions.
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, circIn, easeIn, motion } from "framer-motion";
+import { Variants, motion, AnimatePresence } from "framer-motion";
 import openNewWindow from "@/assets/icons/open-new-window.svg";
 import styles from "./ResourceCard.module.scss";
 
@@ -26,6 +26,7 @@ const variant: Variants = {
  scale: 1,
  opacity: 1,
  transition: {
+ delay: 0.2,
  duration: 0.5,
  staggerChildren: 0.1,
  },
@@ -40,55 +41,58 @@ export default function ResourceCard({
  stickyNoteColor,
 }: ResourceCardProps) {
  return (
- <motion.div
- variants={variant}
- initial="initial"
- animate="animate"
- className={styles.group}
- style={{
- backgroundColor: `${stickyNoteColor}`,
- }}
- >
+ <AnimatePresence mode="wait">
  <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>
-
- {links.map(({ text, link }) => (
- <motion.a
- key={link}
- href={link}
- target="_blank"
- rel="noopener noreferrer"
- className={styles.tag}
+ <motion.div
+ className={styles.container + " text-center px-3"}
  variants={variant}
  >
- {text}
- <motion.div
- className="d-inline ms-1 vertical-align-middle"
+ <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>
+
+ {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>
- ))}
- </motion.div>
+ {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>
+ </AnimatePresence>
  );
 }