CODEWITHSUNDEEP
javascripthtmlcss
randomcoder
randomcoder

Reputation: 646

Aos.js not showing elements when you scroll there

this is another extremely simple question. Is it just me, or does AOS.js only work with div's?

Because in the following link, I am trying it on an h1, and it doesn't work. I try it on a div, and it works. This is part of a larger question, and that project involves divs. It does not work there either. I can delete the attributes from the page in inspect, and it shows up like it is supposed to when it reaches the scroll point.

Then I hit control z + y and then I see the animation work, just not on the scroll. Please help. Thanks for your time. Here is the link to the mini project [Edit] this one is solved, please help with the other one if you can thanks! https://repl.it/@astroboyr/AOSJS-testing

If you find it out, here is the bigger project if you want to help,

https://repl.it/@astroboyr/PianoLife

Upvotes: 5

Views: 6097

Answers (2)

vishal patel
vishal patel

Reputation: 193

In my app.js file after including the following line everything started working as expected.

import { useEffect } from 'react';
import AOS from 'aos'
import 'aos/dist/aos.css'

const App = () => {

   useEffect(() => {
     AOS.init({ duration: 2000 })
   }, [])

   return (
        <div data-aos="fade-in">

        </div>
   )
}

export default App

It was not working earlier because I was not initializing AOS.

Note importing aos/dist/aos.css and adding useEffect is necessary for library to work properly.

Upvotes: 0

Whatatimetobealive
Whatatimetobealive

Reputation: 1353

The code you have doesn't have enough space on the bottom so that reason you are not able to see the animation. if you add more <br> on the bottom you will see its working.

    <!DOCTYPE html>
    <html>
      <head>
        <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>repl.it</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <div data-aos="fade-up"></div>
        <!-- works with div -->
        <h1 data-aos="fade-right">Some H1</h1>

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

        <!-- doesnt with h1 WHYYYYYYY -->
        <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
        <script src="script.js"></script>
      </body>
    </html>

Upvotes: 3

Related Questions