Search code examples
reactjsaos.js

Data-aos animation don't run when displayed

I have animations on titles. One is at the bottom of the screen, and we don't need to scroll to see it.

Here is my code :

<section className='relative px-5 lg:px-10'>
    [...]

    <h2 data-aos='fade-right' data-aos-duration="700" data-aos-delay="400" className='mt-12 mb-4 flex text-2xl font-bold text-lightBlack'>[...]</h2>

    [...]
    <h2 data-aos='fade-right' data-aos-duration="700" data-aos-delay="400" className='mb-4 flex text-2xl font-bold'>[...]</h2>

[...]

Problem : The title at bottom of screen does not display until I scroll. I would like it so be displayed and animated when the page load like the others h2.

How can I do this ?

Solution

  • Found the solution, in case it helps. Setting an offset to trigger when the animation start did the job :

    AOS.init({
  offset: 20,
});

    This means : when the target element is at 20px from bottom of screen, trigger animation.