[Resolved] Implementing AOS (Animate on Scroll) script into GP

[Margot]

I’m having trouble embedding a piece of script from the AOS Library using GP Hooks as well as through the functions.php page. I’ve tried both but they don’t work.

This is what I’ve tried in GP Hooks:

<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>AOS.init();</script>

I’ve also tried putting an enqueue function in my child theme functions.php file:

function register_scripts_and_styles() {
    wp_enqueue_style('AOS_animate', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css', false, null);
    wp_enqueue_script('AOS', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', false, null, true);
    wp_enqueue_script('theme-js', 'http://myurl/folder/wp-content/themes/generatepress_child/aosini.js', ['AOS'], null, true);
}

with the aosini.js file having this code:

AOS.init();

But neither of these options are working for me. Could it be that the script I’m trying to use is incompatible with GP?

[Tom]

In the second snippet, ['AOS'] should be array( 'AOS' ).

What’s the library supposed to do?

[Margot]

I tried that change you mentioned but that didn’t seem to work for me either.

It’s basically a small library that gives you the ability to animate individual elements on your page as you scroll down. Here’s a sample page > https://michalsnik.github.io/aos/

[Tom]

Is your code still added to the site? I’m not seeing it anywhere.

If not, can you re-add it so I can see why it’s not working?

Thanks!

[Margot]

No problem. I got it back up. I applied the effect only to this div:

<div class="homepage-intro-text"> the tag that controls the effect is data-aos=”fade-up”

[Tom]

Hmm, still not seeing the files loaded. Which method are you using to load them?

[Margot]

That’s strange… But that might explain part of the problem… I used this >

function register_scripts_and_styles() {
    wp_enqueue_style('AOS_animate', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css', false, null);
    wp_enqueue_script('AOS', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', false, null, true);
    wp_enqueue_script('theme-js', 'http://myurl/folder/wp-content/themes/generatepress_child/aosini.js', array( 'AOS' ), null, true);
}

in my child theme functions.php document

[Tom]

Ah, you need to do this:

add_action( 'wp_enqueue_scripts', 'tu_add_aos' );
function tu_add_aos() {
    wp_enqueue_style('AOS_animate', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css', false, null);
    wp_enqueue_script('AOS', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', false, null, true);
    wp_enqueue_script('theme-js', 'http://myurl/folder/wp-content/themes/generatepress_child/aosini.js', array( 'AOS' ), null, true);
}

[Margot]

That worked. Thank you so much! You’re awesome!

[Margot]

ps. the script works perfect with GP!

[Tom]

Awesome! Glad I could help! 🙂

[Author]

Posts