Sorry for the noob question - How to setup on wordpress?

[vassil-stoimenov]

Hey,

Again, sorry to waste your time with such a noob question but I'm having trouble loading AOS. I was hoping someone will be kind enough to help me out.

I pasted the following java in my theme-options > external js field

<script src="bower_components/aos/dist/aos.js"></script>

and the following HTML on the top of the page I want my AOS to appear on:
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />

but when I add the data-aos attribute to the html element, the element simply doesn't show up.

Sorry to waste your time!

[HaciKale]

initialize AOS where you wanna use it,
I added this at the top of my front-page.php

<script>
AOS.init({
    duration: 500,
    delay: 200,
  });
</script>

[vassil-stoimenov]

Thank you for helping a dummy like me out!

Do you mind if I ask, are you using a child theme? Also, did you put

<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />`

in the beginning of your home page, or did you also put that somewhere in the editor?

[vassil-stoimenov]

I'm only asking cause I'm using a child theme. I added that initializing script you gave me in my full-width-page.php template. Then I added following to load the external java file:
<script src="bower_components/aos/dist/aos.js"></script>

I added that not in my editor, but instead I went to Appearance > Theme Options > Styling > External Java field. I've added different java there before and it worked.

In addition, I added the html to load the aos.css file at the top of the page I want the AOS to appear.

But still, it's not working. I'm wondering if it's because I need to load the java and the CSS somewhere directly in the editor instead. I tried doing that, but I don't know the proper way/place to add them without getting an error.

[vassil-stoimenov]

I found a field my theme has to link for loading external CSS, as well as the java field I mentioned above. I changed the links to the following:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.css" />`

<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>

and I added the initializing java in my page template. I tried clearing out my cache and debugging on page browser command, but still, it doesn't load

Please, help a mentally-challenged brother out.

[jongc]

Hi @battlethepain, a couple things that might help you out:

1. Are you able to edit the code of your child theme? If so, you can enqueue the stylesheet and the script using wp_enqueue_style() and wp_enqueue_script().
2. Make sure you initialize AOS by HaciKale above after the you enqueue aos.js.

[idmick]

Here's another noob seeking help. I added the following code to functions.php

`wp_register_style( 'AOS_style', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css' );
wp_enqueue_style('AOS_style');

wp_register_script( 'AOS_js', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', null, null, true );
wp_enqueue_script('AOS_js');`

But I'm not sure how to use the animations and/or if I included the library in the correct way?

[idmick]

I think I came one step closer, my functions.php now looks like this.

I got no errors in the console. However, when I add data-aos="fade-up" to an SVG on my page it won't show.

` //* Enqueue AOS.CSS and AOS.js
wp_register_style( 'AOS_animate', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css' );
wp_enqueue_style('AOS_animate');

wp_register_script( 'AOS', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', null, null, true );
wp_enqueue_script('AOS');

//* Enqueue script to activate AOS.js
add_action('wp_enqueue_scripts', 'sk_AOS_init_in_footer');
function sk_wow_init_in_footer() {
add_action( 'print_footer_scripts', 'AOS_init' );
}

//* Add JavaScript before
function AOS_init() { ?>
<script type="text/javascript">
new AOS.init();
</script>

[jongc]

@idmick All of the register and enqueue functions should be wrapped in the action wp_enqueue_scripts.

function register_scripts_and_styles() {
    // Enqueue AOS styles
    wp_enqueue_style(' AOS_animate', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css', false, null);

    // Enqueue AOS script library in footer
    wp_eqneue_script('AOS', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', false, null, true);

    // For the JavaScript that initializes AOS, it's best if you manage that in a separate
    // JS file and enqueue it as a dependency of AOS script library. That way, it ensures the
    // order of your scripts.
    wp_('theme-js', 'path/to/theme.js', ['AOS'], null, true);
}

[pinkpointe6]

So should the .js file we're linking to in the enqueue script just have:

AOS.init();

[jongc]

Correct.

[pinkpointe6]

This doesn't seem to work for me. This is what I have in my child theme functions.php

`function register_scripts_and_styles() {
// Enqueue AOS styles
wp_enqueue_style(' AOS_animate', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css', false, null);

// Enqueue AOS script library in footer
wp_eqneue_script('AOS', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', false, null, true);

// For the JavaScript that initializes AOS, it's best if you manage that in a separate
// JS file and enqueue it as a dependency of AOS script library. That way, it ensures the
// order of your scripts.
wp_('theme-js', 'http://mywebsite.com/websitesandbox/wp-content/themes/generatepress_child/aosini.js', ['AOS'], null, true);

}`

and my aosini.js file has

AOS.init();

but nothing seems to be happening, animation wise. Not sure what I'm doing wrong?

[pinkpointe6]

ps. I'll remove the comments later but I just wanted to make sure I copied and pasted exactly from the code you posted

[jongc]

You missed the part where those registrations are supposed to fire in the action wp_enqueue_scripts. After that, ensure the styles and scripts are visible on your web page in the correct order.

[michalsnik]

Closing due to long time with no response since last instruction provided by @jongc :) Thanks to everyone involved. If there will be more issues feel free to reopen discussion.

[UzairKhan97]

hello @jongc will you please help me how to add AOS animation in my WordPress website??

[swenceslao]

Hi there! I was having the same issue on my Wordpress project but it finally worked for me when I waited for the target elements to load on the DOM using jQuery and then initialized AOS after, rather than initializing AOS right at the top of the script, like so:

// Explcitly wait for whole page to load
$(window).bind("load", function() {
// Animate on Scroll on homepage
if ($('.wp-show-posts-columns.wp-show-posts')) {
let articles = $('.wp-show-posts-columns.wp-show-posts > article.wp-show-posts-single');
for (var i = 3; i < articles.length; i++) {
$(articles[i]).attr('data-aos', 'fade-in');
}
AOS.init({duration: 600, offset: 400, startEvent: 'DOMContentLoaded'});
}
});

[skyboardsoftware]

to get the aos to work it is essential for the css file to be included...

	<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />

I seemed to of missed putting it in and was scratching my head on why everything was not animating.... but I was able to see that the tags where changing during scrolling in the inspector.

You can see that a aos-animate item getts added during the "effect"

that would be a good way of testing if your animations are firing off. But once I added the css file everything just came to life.

[firverrwrok0]

of course you can do it in wordpress. It can be done not only for siteground plugin but also can be done for all builder plugin. Here an example you check that I done it in my divi site: (https://ntechway.com)

[firverrwrok0]

I know very well how to get it work. If anyone need it in wordpress then hire me and I will do it for you

[firverrwrok0]

Hi,

I see so many similar questions and I still can't get AOS to work, in WordPress custom theme. Here is how I'm doing this:

At my main.js file I'm initialising AOS by:

AOS.init({
    duration: 1500,
    disable: 'mobile'
})

then in functions.php I'm enqueuing AOS js file as fallows:

function site_files() {
    wp_enqueue_style(' AOS_animate', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', false, true);
} 

I also tried: https://github.com/michalsnik/aos/issues/254#issuecomment-1098359715

then I'm using it as fallows: <h1 class="title" data-aos="fade-up"></h1>

and nothing works :( Is there anything I'm doing wrong here? Thanks for your time.

My answer:

I know very well how to get it work. If anyone need it in wordpress then hire me and I will do it for you
Regards,
Mohammed Nabi

[firverrwrok0]

My answer:

I know very well how to get it work. If anyone need it in wordpress then hire me and I will do it for you Regards, Mohammed Nabi

[firverrwrok0]

I am sorry I don't have fiverr we can make the transaction in wise.com or freelancer.com and my id on freelancer.com is: https://www.freelancer.com/u/fiverrwork0

[firverrwrok0]

For more information this is my what's app id: +8801830200115. If anyone need the michalsnik AOS on your website you can contact me any time.