Black Friday Sale! Get up to $40 off GP Premium!Learn more

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

Home Forums Support Implementing AOS (Animate on Scroll) script into GP

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #493120
    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?

    GP Premium 1.5.6
    #493358
    Tom
    Lead Developer
    Lead Developer

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

    What’s the library supposed to do?

    #493577
    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/

    #494013
    Tom
    Lead Developer
    Lead Developer

    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!

    #494434
    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”

    #494562
    Tom
    Lead Developer
    Lead Developer

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

    #494600
    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

    #494899
    Tom
    Lead Developer
    Lead Developer

    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);
    }
    #495303
    Margot

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

    #495304
    Margot

    ps. the script works perfect with GP!

    #495452
    Tom
    Lead Developer
    Lead Developer

    Awesome! Glad I could help! 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.