Trigger animation by delay or if scroll

Question

I am using nextJS with framer-motion.

I would like to display a part of my website (i.e. the header menu) if at least one condition below is met :

1. the user is on the website since more than 5s (~delay the animation by 5s)
2. the part the user sees is not the very top of the page ( e.g. he scrolled, or refreshed the page not at the top)

Currently, I could implement condition 1. using delay. I heard about useViewportScroll but not sure how to integrate it in my current configuration

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

Thank you so much !

Answer 1

Here is a sandbox that I believe does what you're looking for. It uses setTimeout to initially delay the animation by 5 seconds. If the user scrolls before 5 seconds, useViewportScroll will show the header.

Sandbox