React Animation for Individual Photos As You Scroll Down with Framer Motion and Intersection Observer

Utilizing the framer-motion library, this code implements animations within React applications. It introduces a Card component responsible for animating emoji cards, which are configured with specified variants. Through the FramerMotion component, a series of cards is rendered using data from an array, with animation effects applied to each card. CSS styles are employed to customize the appearance of both the cards and their container, with the .card-container class utilized for overflow handling and centering. Additionally, the .splash class adds a decorative touch by applying a clip-path to generate a splash effect.

index.js

import { motion } from "framer-motion";
import './style.css';

const cardVariants = {
  offscreen: {
    y: 300
  },
  onscreen: {
    y: 50,
    rotate: -10,
    transition: {
      type: "spring",
      bounce: 0.5,
      duration: 1
    }
  }
};

function Card({ emoji }) {
  return (
    <motion.div
      className="card-container"
      initial="offscreen"
      whileInView="onscreen"
      viewport={{ once: true, amount: 0.8 }}
    >
      <motion.div className="card" variants={cardVariants}>
        {emoji}
      </motion.div>
    </motion.div>
  );
}

const food = [
  ["?", 340, 10],
  ["?", 20, 40],
  ["?", 60, 90],
  ["?", 80, 120],
  ["?", 100, 140],
  ["?", 205, 245],
  ["?", 260, 290],
  ["?", 290, 320]
];

export default function FramerMotion() {
  return food.map(([emoji]) => (
    <Card emoji={emoji} key={emoji} />
  ));
}


style.css

.card {
  font-size: 164px;
  width: 300px;
  height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 20px;
  box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.075), 0 0 2px hsl(0deg 0% 0% / 0.075),
    0 0 4px hsl(0deg 0% 0% / 0.075), 0 0 8px hsl(0deg 0% 0% / 0.075),
    0 0 16px hsl(0deg 0% 0% / 0.075);
  transform-origin: 10% 60%;
}

.card-container {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 20px;
  margin-bottom: -120px;
}

.splash {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  clip-path: path(
    "M 0 303.5 C 0 292.454 8.995 285.101 20 283.5 L 460 219.5 C 470.085 218.033 480 228.454 480 239.5 L 500 430 C 500 441.046 491.046 450 480 450 L 20 450 C 8.954 450 0 441.046 0 430 Z"
  );
}