Can't get library to work on a wordpress (child) theme Bridge with php

[justacontractor]

This is:

• Question

Specifications

• AOS version: 21.1.1 and 2.3.4
• Browser: Firefox and chrome

Expected Behavior

Animation on scroll

Actual Behavior

Animation doesn't happen

Steps to Reproduce the Problem

https://concreteregeneration.com/

functions.php contains:

function register_scripts_and_styles() {
    // Enqueue AOS styles
    wp_enqueue_style(' AOS_animate', 'https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css', false, null);

    // Enqueue AOS script library in footer
    wp_eqneue_script('AOS', 'https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js', false, null, true);
    wp_('aos-init', 'themes/bridge-child/aos-init.js', ['AOS'], null, true);
}

aos-init.js contains:

AOS.init({
    duration: 500,
    delay: 200,
  });

Detailed Description

Hi, this is probably a stupid question, but I can't get the library to work. I don't understand anything about javascript or php, but i found this answer - https://github.com/michalsnik/aos/issues/254 and that's how I came up with the php:

function register_scripts_and_styles() {
    // Enqueue AOS styles
    wp_enqueue_style(' AOS_animate', 'https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css', false, null);

    // Enqueue AOS script library in footer
    wp_eqneue_script('AOS', 'https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js', false, null, true);

    wp_('aos-init', 'themes/bridge-child/aos-init.js', ['AOS'], null, true);
}

And I have a file - aos-init.js, that contains:

AOS.init({
    duration: 500,
    delay: 200,
  });

yet, my elements won't fade in. I love the way the demo looks and would be absolutely stoked to get in on my stupid website.

My website is https://concreteregeneration.com

EDIT:

My theme allows me to add raw HTML and raw JS elements, so I also tried adding the following to the page:

and

That actually works. However, if it's an easy fix, I would rather do it from the functions.php file so that I don't have to include that on every single page

[ProjectKarol]

Try use (document).redy function jQuery( document ).ready( function() { AOS.init({ duration: 500, delay: 200 }); });

[jamaicavb]

I used on a JQuery document

var $j = jQuery.noConflict(); $j(document).ready(function() { AOS.init(); });

[UzairKhan97]

hello, please help me how can i add AOS animation in my WordPress website