Elements on load not animating

[Sulley93]

Elements located in viewport on page load not animating untill scroll even with animatePreScroll = true

[victoprincipe]

Try add more Offset to your Component, like this:

<AnimationOnScroll
    animateIn="animate__fadeInRight"
    animateOnce
    animatePreScroll 
    offset={50} // Default value is 150
  >
    <span>Test</span>
</AnimationOnScroll>

[Azteker]

Try add more Offset to your Component, like this:

<AnimationOnScroll
    animateIn="animate__fadeInRight"
    animateOnce
    animatePreScroll 
    offset={50} // Default value is 150
  >
    <span>Test</span>
</AnimationOnScroll>

Tried in react 18, and get the same not animation issue

[victoprincipe]

Can you give more details about your problem?

[Azteker]

Can you give more details about your problem?

I just created a new project with create-react-app, and replace App.tsx returned content with

<AnimationOnScroll 
        animateIn="animate__shakeY"
        animateOut="animate__bounceOutRight"
        animatePreScroll 
        offset={50}
      >
    <h2>Some Text</h2>
</AnimationOnScroll>

That is all, and I do not see any animation when load the page

[tjay27]

@victoprincipe facing the same issue, on page load, animateIn doesn't fire up.

[kdhanushbhat]

I too am having the same issue.

[Semako123]

Same here

[Semako123]

I was able to fix mine by putting off the React Strict Mode, try it out

[CRIMSON-CORP]

What is suggest to do is to add the animate CSS animation class names directly to the element instead of using Animation on scroll on that element, then you can use Animation on Scroll on other elements that need to be scrolled to, worked for me