wp-aos-animator

WP AOS Animator

Automates AOS (Animate On Scroll) implementation in WordPress themes. Covers the full pipeline: audit → install → enqueue → init → animate.

Phases

Run these in order. Each phase depends on the previous one succeeding.

Phase 1: Audit

Check if AOS is already present:

ls <theme>/vendors/aos/aos.js
ls <theme>/vendors/aos/aos.css

Check if enqueued in functions.php:

grep -n "aos" <theme>/functions.php

Check if AOS.init() exists in main JS:

grep -n "AOS.init" <theme>/assets/js/*.js

Report findings: what's present, what's missing.

Phase 2: Install (if missing)

If vendors/aos/ doesn't exist, download AOS:

cd <theme>/vendors/
mkdir -p aos
curl -sL "https://raw.githubusercontent.com/michalsnik/aos/v2.3.4/dist/aos.js" -o aos/aos.js
curl -sL "https://raw.githubusercontent.com/michalsnik/aos/v2.3.4/dist/aos.css" -o aos/aos.css

Phase 3: Enqueue (if missing)

In functions.php, inside the wp_enqueue_scripts action, add:

// AOS
wp_enqueue_style('aos-css', get_template_directory_uri() . '/vendors/aos/aos.css', array(), _RATIO_WEB_);
wp_enqueue_script('aos-js', get_template_directory_uri() . '/vendors/aos/aos.js', array('jquery'), _RATIO_WEB_, array('in_footer' => true, 'strategy' => 'defer'));

If AOS JS is already enqueued but CSS is missing, add just the CSS line right before the JS line. Put them together with a // AOS comment.

Phase 4: Initialize (if missing)

In the theme's main JS file, add inside $(document).ready(...):

AOS.init({
  once: true,
});

If there's no $(document).ready, wrap it:

$(document).ready(function () {
  AOS.init({
    once: true,
  });
});

Phase 5: Animate templates

Scan every .php template in the theme root and template-parts/ directory. For each file:

Never animate an element that also needs a stacking order or a slide. AOS's [data-aos^=fade] rule leaves an identity transform behind for the whole life of the page, and a transform does two things that outlive the animation: