# SW Helper Animation — AI Agent Documentation

**Module name:** SW Helper Animation  
**Module path:** `smithworks-2025/sw-modules/SW Helper Animation.module` (smithworks portal); also in master `sw-master`  
**SW Category:** Global  
**Last updated:** 2026.08.18.12.17

Use this document when: The user asks how to add `a-*` motion classes to headings or other modules, how type-in / reveals / accents work, or how to place a sitewide animation helper.

Support: https://smithworks.marketing/contact — Documentation / FAQs: https://smithworks.marketing/faqs

---

## 1. Overview

SW Helper Animation is an **invisible** helper. It does not paint a section. Place it **once per page**, or **once in the global footer** for sitewide class support. Put `a-*` classes on any heading / CSS Class field in other modules. This module only loads the CSS/JS.

**Do not** use throwaway **SW Headings Animation POC** / **SW Animation POC** on production pages once this helper is in place.

No Module Settings / background chrome (utility exception).

---

## 2. Content tab

Pack toggles (each has editor help_text with class cheat-sheets):

- **Enable reveals** — fade / slide / scale classes  
- **Enable type-in** — `a-type-in` letter animation  
- **Enable accents** — pulse / shimmer  

Defaults: trigger **on-load**, speed **medium**, delay **none**.

---

## 3. Class API (put on the animated node)

**Motion (examples):** `a-fade-in`, `a-fade-up`, `a-fade-down`, `a-slide-left`, `a-scale-in`, `a-type-in`, `a-pulse-soft`, `a-shimmer`

**Trigger:** `a-on-load` (default) or `a-on-view`

**Speed:** `a-speed-slow` / `a-speed-medium` / `a-speed-fast`

**Delay:** `a-delay-none` (default) or `a-delay-*` variants in the cheat-sheet

**Sequence:** `a-after-previous` — wait for the previous animated sibling

**Repeat:** `a-repeat` — continuous for accents. On **`a-type-in`**, `a-repeat` loops: type → hold (`--a-type-hold`, default 1.2s) → clear → type again.

`a-pulse-soft` and `a-shimmer` are **one-shot** unless `a-repeat` is added.

Duration/easing defaults are hoisted onto animated nodes (works even outside this module’s wrapper).

---

## 4. Type-in (important)

- CSS hides `.a-type-in` until `data-a-type-prepared` so the heading does **not** flash full text then re-type (FOUC).  
- Type-in **flattens** the heading to plain text + per-letter spans. Nested HTML / `<code>` in samples will **not** match other sample styling. Authors should use plain text for type-in.

**Reduced motion:** Respect `prefers-reduced-motion` — do not tell users to force animation when the OS requests reduced motion.

---

## 5. Common tasks

- **Sitewide classes:** Add this module once to the global footer; publish global content.  
- **One test page:** Add the module on that page only.  
- **Heading in SW Hero / Cards / Text Headings:** Put `a-fade-up a-on-view` (or similar) in that module’s CSS Class / heading class field.  
- **Looping type-in:** `a-type-in a-repeat` (plain text only).

---

## 6. References

- Editor help_text on the three pack toggles (class cheat-sheets)  
- Prefer this module over SW Headings Animation POC

**Changelog (AI doc):**  
- 2026.08.18: **Master 2026.08.18.12.17** — First official ship. Type-in FOUC fix; `a-repeat` loops type-in.