framer 运动滚动动画仅在向下滚动时而不是向上滚动时

Question

我已经阅读了成帧器运动滚动触发器文档。我想知道是否有一种方法可以让 div 每次只在向下滚动而不是向上滚动时设置动画。

假设有 3 个部分 1、2 和 3。我向下滚动到第 2 部分 div 将生成动画。但如果从第 3 部分向上滚动到第 2 部分，div 将再次产生动画。我只想从 1 向下滚动到 2 时设置动画，而不是向上滚动时设置动画。

这里是codesandbox：https://codesandbox.io/p/sandbox/framer-motion-5-3-scroll-triggered-animations-forked-8ppph7

向上和向下滚动时您将看到卡片动画。有没有办法解决这个问题，使其仅在向下滚动和向上滚动时动画，div 应保持原样。

我的代码部分在这里

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>
  );
}

Answer 1

我建议您查看 YouTube 上的“Web Dev Frontend”播放列表。它涵盖了广泛的前端开发主题，可能是您学习之旅的宝贵资源：

播放列表：Web 开发前端