Framer Motion doesn't animate correctly with viewport

Question

I am currently using framer motion in my Nextjs + Tailwind project.

But if I use whileInView option with delay, it does not work correctly.

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.5 }}
          >
            <div className="w-[92px] h-[92px] flex justify-center items-center bg-red-100 rounded-full">
              <span className="font-bold">My Text</span>
            </div>
          </motion.div>

In this code, if I wait for the full animation to be done (which will take 1 second in this case), there isn't a problem.

However, if I scroll down too fast, animation seems to stop, and when I scroll back to the element, it continues at the point when it stopped.

The thing is, if I have another motion element elsewhere, and scroll down too fast to not wait for all the animation, all other motion elements break somehow.

This does not happen when I set viewport={{ once: true}} but I want the animation to happen everytime I see that element.

If I understand it correctly, whileInView option uses Intersection Observer under the hood, but when I used intersection observer, there was no such phenomenon.