CODEWITHSUNDEEP
javascripthtmlcss
Yotam Dahan
Yotam Dahan

Reputation: 699

AOS animated scrolling plugin doesn't appears

I'm using AOS plugin, and once I run the plugin on localhost it fails to appear, but if I run it on codepen it runs perfectly.

I have the same code as it appears in codepen and I've used AOS.init inside a <script> tag to run it. Also I have CDN stylesheet and script in my code.

<html>
    <head>
        <title>What To Eat - Home</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
        <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="javascript/script.js"></script>
        <script>
        AOS.init({
  duration: 1200,
})
      </script>
    </head>
    <body>
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>

<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>

<div class="item" data-aos="slide-up">7</div>

<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>

    </body>
</html>

And CSS is the same as you can see in codepen.

I believe the browser version (Chrome - latest version) isn't the problem since I able to see the result in CodePen good enough.

How can I run this plugin in my localhost?

Upvotes: 0

Views: 2543

Answers (1)

dvr
dvr

Reputation: 895

You need to call your script after the page is rendered, this will allow to bind the events to your elements after being created:

<html>
    <head>
        <title>What To Eat - Home</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
        <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="javascript/script.js"></script>

    </head>
    <body>
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>

<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>

<div class="item" data-aos="slide-up">7</div>

<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>

    </body>
</html>
<script>
    AOS.init({
      duration: 1200,
    })
</script>

Upvotes: 2

Related Questions