Search code examples
javascriptreactjsparticles.jsaos.js

How to implement AOS in React AOS Doesnt work?

AOS Conflict with ParticleJS with react-tsparticles

This is:

  • Bug

Specifications

  • AOS version: ^2.3.4
  • OS: Windows 10
  • Browser: Chrome

Expected Behavior

AOSing

Actual Behavior

Particle.js Conflict with AOS

Steps to Reproduce the Problem

<Particles/> is component made from react-tsparticles . if this component is a parent or sibling aos doesnt work.

           <div>
              <Particles />
            <h1 data-aos="fade-up"></h1>
          </div>
Solution

  • Possible Solution

    for now you can work around this

       <div>
         <div>
              <Particles />
          </div>
          <h1 data-aos="fade-up"></h1>
</div>