# Wp Aos Animator > WordPress AOS animation installer — audits, installs, enqueues, initializes, and seeds Animate On Scroll on every visual element across all PHP templates. Use when the user asks to add scroll animations, AOS, fade-in effects, entrance animations, or "make elements appear on scroll" in any WordPress theme. - Skill: `yojahny55/wp-aos-animator` (Agent Skill) - Install (CLI): `npx skillmds add yojahny55/wp-aos-animator` - Raw SKILL.md: https://api.skillmd.com/api/skills/yojahny55/wp-aos-animator/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: yojahny55 (https://skillmd.com/u/yojahny55) - Updated: 2026-08-19 - Page: https://skillmd.com/skills/yojahny55/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 /vendors/aos/aos.js ls /vendors/aos/aos.css ``` Check if enqueued in `functions.php`: ``` grep -n "aos" /functions.php ``` Check if AOS.init() exists in main JS: ``` grep -n "AOS.init" /assets/js/*.js ``` Report findings: what's present, what's missing. ### Phase 2: Install (if missing) If `vendors/aos/` doesn't exist, download AOS: ```bash cd /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: ```php // 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(...)`: ```js AOS.init({ once: true, }); ``` If there's no `$(document).ready`, wrap it: ```js $(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: **Skip these elements:** - ``, ``, ``, ``, ``, `