Archived topic

Implementing AOS (Animate on Scroll) script into GP

10 replies · Started by Margot on February 10, 2018

Viewing posts 1–11 of 11

February 10, 2018 at 11:20 am #493120

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?

February 10, 2018 at 9:27 pm #493358

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

What's the library supposed to do?

February 11, 2018 at 6:57 am #493577

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/

February 11, 2018 at 8:47 pm #494013

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!

February 12, 2018 at 6:53 am #494434

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"

February 12, 2018 at 9:44 am #494562

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

February 12, 2018 at 10:21 am #494600

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

February 12, 2018 at 8:34 pm #494899

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);
}

February 13, 2018 at 6:59 am #495303

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

February 13, 2018 at 7:00 am #495304

ps. the script works perfect with GP!

February 13, 2018 at 9:26 am #495452

Awesome! Glad I could help! :)

This archived topic is closed to new replies.

Start building better websites today.