Here is my App.js Code

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import AOS from "aos";
import "aos/dist/aos.css";
import Home from "../Home/Home";
AOS.init();

function App() {
  return (
    <>
      <div className="App">
        <Router>
          <Route path="/">
            <Home />
          </Route>
        </Router>
      </div>
    </>
  );
}

export default App;

export default App;

Home.jsx

import React from "react";

export default function Home() {
  return (
    <>
      <div className="mitments">
        <p data-aos="fade-left">This is text fading</p>
      </div>
    </>
  );
}

I think this is the correct way, before using data-aos="fade-left" it working fine, But when I use data-aos the text got disappeared. I'm not getting what is the issue.

Here is my App.js Code

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import AOS from "aos";
import "aos/dist/aos.css";
import Home from "../Home/Home";
AOS.init();

function App() {
  return (
    <>
      <div className="App">
        <Router>
          <Route path="/">
            <Home />
          </Route>
        </Router>
      </div>
    </>
  );
}

export default App;

export default App;

Home.jsx

import React from "react";

export default function Home() {
  return (
    <>
      <div className="mitments">
        <p data-aos="fade-left">This is text fading</p>
      </div>
    </>
  );
}

I think this is the correct way, before using data-aos="fade-left" it working fine, But when I use data-aos the text got disappeared. I'm not getting what is the issue.

• javascript
• html
• reactjs
• aos.js

2 Answers 2

You should run AOS.init(); after your app mounts:

function App() {

  useEffect(() => {
    AOS.init();
  }, []);

  return (
    <>
      <div className="App">
        <Router>
          <Route path="/">
            <Home />
          </Route>
        </Router>
      </div>
    </>
  );
}

Since this library isn't designed for React, you will probably have to re-initialize this in future when your ponent re-renders. I remend using an animation library built for React.

    // Initialize AOS with custom settings
    setTimeout(() => {
      AOS.init({

        duration: 1000, // Duration of animations in ms
        disable: function() {
          // Disable for mobile devices (screen width less than 768px)
          return window.innerWidth < 768;
        }

      });
    }, 1000);
    
  }, []); //setTimeout will resolve issue