when reload page, the component doesn't animated.

[abdullah-sameh]

the component must be in the middle of page to be animated like in your demo page,The problem, that I can't make the header of page animated when reload page, i had to scroll to trigger.

[va1bhav-rawat]

In my case, I added offset={1} to the scroll animation component to run animation on entering the page.

[firstpersoncode]

In my case, I added offset={1} to the scroll animation component to run animation on entering the page.

Does this only work if scrollableParentSelector defaults to the document? I tried setting scrollableParentSelector to the parent div that contains the animated scroll elements, but it didn't work as expected. I had to scroll until I passed the element first, then scroll back, and finally scroll past the element again until it worked.

[kolokytp]

Any updates on this one? I seem to have the same problem as well

[amazingdudu]

same problem

[TwickE]

I also have the same problem, in the documentation is mentioned that there is a property called animatePreScroll that when set to true which is the default value animates the element if already visible when the page loads but it doesn't work. I manage to workaround the problem but the solution is kind of junky. I created a Hook that scrolls the page down 1px and back up to the top very fast when the page loads, the hook needs to be in the page where the component is used.

Hook:

import { useEffect } from 'react';

function useScrollUpdate() {
    useEffect(() => {
        window.scrollBy(0, 1);
        setTimeout(() => {
            window.scrollBy(0, -1);
        }, 50);
    }, []);
}

export default useScrollUpdate

But for this to work the ScrollAnimation component also needs the property animatePreScroll set to false which is kind of unintuitive.

Example:

<ScrollAnimation animatePreScroll={false} animateIn='fadeInLeft'>
    //Your animated component code here
</ScrollAnimation>

[ety04]

Another user with the same issue. I opened an older React project (by the time this extension was 2.1.5, React 17) which had the animation working perfectly on page load. Same project with all dependencies updated (today this extension is 2.1.9, React 19), and the animation only shows if the page is scrolled (it is totally invisible on page load). None of the workarounds above made the trick in my case. Read the doc and tried all the options to no avail.