Animation does not work

[hasratyan]

Hello. I attached all components to my html file, but on scroll, there is not working any effect.

[mirceatrancota]

Try adding this: <script> AOS.init({ easing: 'ease-in-out-sine' }); </script> In the footer after you loaded aos.js

[hasratyan]

I have added, but anyway, it does not work.

https://it-center.am/demo/

The div on which should work the animation is here

`<section id="main">
        <section id="benefites">
                    <article>
                        <h1>Ծրագրավորում սովորելու լավագույն վայրը</h1>
                    </article>
                    <article>
                        <h1>Ավելի քան 130 շրջանավարտ</h1>
                    </article>
                    <article>
                        <h1>Աշխատանքի առաջարկ ուսման ընթացքում</h1>
                    </article>
                    <article>
                        <h1>Պատրաստի նախագծեր</h1>
                    </article>
        </section>
        <div data-aos="zoom-in" class="aos-init">Heeeey</div>
</section>`

[michalsnik]

Hey, please take a look at http://codepen.io/michalsnik/pen/WxNdvq and make sure you're loading and executing AOS properly. It simply has to work, when used correctly :)

[hasratyan]

I everything did correctly using the instruction of setup of AOS. When I add attribute data-aos="zoom-in" , it automatically adds the class item aos-init , but on scrolling nothing happens.

[michalsnik]

Have you been playing with scroll somehow? The position is calculated properly - when you call AOS.refresh() in console it returns array of nodes that should animate with their trigger point. The problem is that window.scrollY always returns 0 on your page, thus AOS can't detect if page was scrolled.

[hasratyan]

I found the problem. In CSS I used height:100% for body and html. That was a problem

[michalsnik]

Oh, yes. I'm glad you figured it out. I guess we can close this issue then :)