通过延迟或滚动触发动画

Question

我使用的是带有帧动的nextJS。

我想显示我的网站的一部分(即标题菜单)，如果至少满足以下一个条件:

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

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

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

非常感谢!

Answer 1

这是一个我相信你正在寻找的沙盒。它使用setTimeout初始延迟动画5秒。如果用户在5秒前滚动，useViewportScroll将显示标题。

沙箱