CODEWITHSUNDEEP
javascriptwordpressanimate-on-scroll
Ben Viatte
Ben Viatte

Reputation: 503

Implementing AOS into wordpress makes the targeted elements blank instead of fade-in

I am trying to implement Michalsnik's Animate On Scroll plugin into my wordpress website. But when I make the following div with "data-aos", as instructed, the element turns out blank instead of fading in.

<div class="textbox center branch-bg" data-aos="fade" data-aos-duration="600">
Immergez-vous
</div>

This is how I attempted the installation:

1) I added 

<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

and

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

to my header file to load the CSS and the Javascript.

2) I added the
AOS.init({disable: 'mobile'}); function to my script in order to activate it (but disable it on mobile)

Here is a link to the webpage with an anchor. The first article is blank, though it should fade in on scroll.

http://latelierdegaia.ch/#content

Is there a step in the installation I missed? Am I doing something else wrong?

Thank you so much!

Upvotes: 0

Views: 1989

Answers (1)

Ben Viatte
Ben Viatte

Reputation: 503

Ok, after 3 hours of meddling around with code, I found the solution!

My mistake was, I was adding 

<script>
AOS.init();
</script>

in the header, between the 

<head></head>

tags, and actually I should add it at the beginning of the body, between the 

<body> </body>

tags.

All the rest I was doing right. Hurray!

Upvotes: 1

Related Questions