AnimateOnScroll: Opacity remains zero if the element is positioned higher on load position

[rozsazoltan]

Describe the bug

I placed several animated divs on a page. I noticed that if I reload the page in the middle or at the bottom and start scrolling up, the animations don't play. After further inspection, I realized that the animations correctly didn't play since these elements were already scrolled past at load time, but their opacity remained at 0.

DOM result after loading

This component should have already loaded because it's positioned above the reload point, yet it still kept the opacity: 0 setting. That’s why it's not visible.

<div
  class="animate-duration-1000 animate-ease-in-out flex flex-col gap-4 px-8"
  data-pd-animateonscroll="true"
  style="opacity: 0;"
>...</div>

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-wl17wf?file=src%2FApp.vue

PrimeVue version

4.2.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 130, Edge 130, Firefox 131, Opera 107, Safari 18

Steps to reproduce the behavior

1. Load a demo with an animated div at the top of the page (this div will never be visible at the very top when scroll to top after refresh). 1-2. Note: There may be animated divs in different places on the page, but when you scroll back to the top (like starting over) and scroll down again, they become visible.
2. Scroll down.
3. Refresh the page (the browser will try to load the page where you left off due to caching).
4. Where you refreshed, animations play, but if you scroll up, you see nothing (these elements are still there, but their opacity is set to 0, so they're invisible).
5. Scroll down again (some elements will now switch their opacity to 1, but the div at the top of the page will still be invisible).

Check the DOM, the invisible elements are actually only hidden because of a leftover style="opacity: 0;".

https://github.com/user-attachments/assets/c9836578-06be-471b-9a5d-57db981ac954

(I don't know why the enterClass animations aren’t working on the StackBlitz repro, but I'm not concerned with that right now, just that my issue is reproducible.)

Expected behavior

After reloading, all animations above the current position should already be "completed", so I should see every component with style="opacity: 1", not style="opacity: 0".