framer motion scroll animation only when scroll down not while scroll up

Question

I have gone through the framer motion scroll trigger documentation. I want to know if there is a way to animate the div every time only while scrolling down not scrolling up.

Suppose there is 3 section 1, 2 and 3. I scroll down to section 2 div will animate. But If scroll up from section 3 to 2 div will again animate. I want only to animate from scrolling down from 1 to 2 not while scrolling up.

Here is the codesandbox: https://codesandbox.io/p/sandbox/framer-motion-5-3-scroll-triggered-animations-forked-8ppph7

You will see card animate while scrolling up as well as down. is there a way to solve this so that it animates only while scrolling down and while scrolling up, the div should stay as it is.

My code is section is here

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


function Card({ emoji, hueA, hueB }: Props) {
  const background = `linear-gradient(306deg, ${hue(hueA)}, ${hue(hueB)})`;

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