通过延迟或滚动触发动画

Trigger animation by delay or if scroll

我在 framer-motion 中使用 nextJS。

如果满足以下至少一个条件，我想显示我网站的一部分（即 header 菜单）：

  1. 用户在网站上超过 5 秒（~将动画延迟 5 秒）
  2. 用户看到的部分不是页面的最顶部（例如，他滚动或刷新不在顶部的页面）

目前，我可以使用延迟实现条件 1。 我听说过 useViewportScroll 但不确定如何将它集成到我当前的配置中

  <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{   delay: 5, duration : 2  }} className=" ">

非常感谢！

这是一个沙箱，我相信它可以满足您的需求。它使用 setTimeout 最初将动画延迟 5 秒。如果用户在 5 秒之前滚动，useViewportScroll 将显示 header.

Sandbox