# 1.1.1 — What “Pro-Level GSAP” Actually Means ✅

*(Skills checklist + what “good” looks like in real WordPress/Bricks projects)*

Pro-level GSAP isn’t about knowing every method; it’s about delivering **motion that feels intentional, resilient, performant, and maintainable**—especially under real constraints: responsive layouts, CMS content changes, caching/minification plugins, popups, query loops, and client edits.

Below is a *practical* checklist you can use to self-assess and to guide what we’ll build throughout the course.

---

## 1) Motion Design Fundamentals (You’re animating meaning, not pixels) 🎛️

A pro can explain *why* something moves—not just *how*.

1. **Intent & hierarchy**
   1. You can articulate the purpose of each animation:
      1. *Guidance* (direct attention)
      2. *Feedback* (confirm an action)
      3. *Continuity* (connect states)
      4. *Delight* (brand personality—used sparingly)
   2. You avoid “animation for animation’s sake.” If it doesn’t help, it goes.

2. **Timing literacy**
   1. You intentionally choose durations (not random defaults).
   2. You understand the “feel” difference between:
      1. Quick UI feedback (often ~0.12–0.25s)
      2. Content reveals (often ~0.4–0.9s)
      3. Storytelling sequences (often 1.2s+ total, composed of smaller beats)
   3. You can *speed up or slow down* an entire experience consistently (tokens / global defaults).

3. **Easing literacy**
   1. You know what easing communicates:
      1. *Ease out* = arrives gently (common for entrances)
      2. *Ease in* = leaves decisively (common for exits)
      3. *Ease in-out* = smooth travel (common for continuous motion)
   2. You keep easing consistent across a site (design system approach).

4. **Spatial consistency**
   1. Your distances match layout scale (e.g., cards move 12–24px, not 200px).
   2. You avoid moving elements so far they feel disconnected from where they came from.
   3. You consider directionality:
      1. Upward motion often reads as “lifting / appearing”
      2. Downward motion often reads as “dropping / dismissing”
      3. Horizontal motion can imply “navigation / progression”

---

## 2) GSAP Core Mastery (Fluent with the primitives) 🚀

A pro is fast because they deeply understand the foundational building blocks.

1. **Tween fluency**
   1. You know when to use:
      1. `gsap.to()` (animate *to* a known end state)
      2. `gsap.from()` (reveal from an initial state without manually setting it in CSS)
      3. `gsap.fromTo()` (when you need exact start and end control)
   2. You understand that `from()` can be tricky if something else sets the starting styles (CSS, inline styles, other scripts).

2. **Property fluency**
   1. You prefer transforms and opacity for performance.
   2. You know the difference between:
      1. `x/y` vs `translateX/translateY`
      2. `autoAlpha` vs `opacity`
         1. `autoAlpha` toggles visibility at `0` (often ideal for entrances/exits)
   3. You recognize “expensive” properties (e.g., layout-triggering ones like `top/left/width/height`) and avoid them when possible.

3. **Stagger fluency**
   1. You can stage lists of elements without writing loops manually.
   2. You can produce different rhythms:
      1. Subtle (small stagger, gentle ease)
      2. Snappy (short duration, tighter stagger)
      3. Dramatic (longer stagger, stronger ease)

4. **Callbacks & lifecycle**
   1. You use callbacks for *integration*:
      1. Toggling classes
      2. Updating ARIA states
      3. Enabling pointer events only after animation completes
   2. You avoid heavy work in `onUpdate` that causes jank.

---

## 3) Timelines (The “pro multiplier”) 🎬

Pros default to timelines because they scale.

1. **Composition & readability**
   1. You structure timelines so the sequence reads like a story.
   2. You use labels and the position parameter to avoid “magic delays.”

2. **Control**
   1. You can `play()`, `pause()`, `reverse()`, `restart()`, and set progress.
   2. You can attach a timeline to UI state (menu open/close, modal in/out).

3. **Modularity**
   1. You can write functions that **return timelines**:
      1. One function per component (hero, cards, nav, modal)
      2. No shared global selectors that accidentally target other sections

---

## 4) ScrollTrigger Competence (Real-world scroll without fragile hacks) 🧭

Scroll is where “toy demos” often break. Pros make it robust.

1. **Trigger calibration**
   1. You understand `trigger`, `start`, `end`, `toggleActions`, `scrub`, and `pin`.
   2. You use markers for calibration during dev—and remove/disable for production.

2. **Responsiveness**
   1. You implement different scroll behaviors by viewport size using `ScrollTrigger.matchMedia()`.
   2. You anticipate layout changes (fonts, images, accordions) and handle refresh correctly.

3. **Performance**
   1. You batch repeated elements rather than creating a heavy trigger per item when needed.
   2. You avoid massive scrubbed transforms on huge images unless you’ve tested mobile.

---

## 5) WordPress + Bricks Integration (Where pros quietly win) 🧱

In WP/Bricks, “it works on my machine” isn’t enough.

1. **Script loading discipline**
   1. You know where code should live:
      1. Global vs page vs template vs component
   2. You avoid loading the same GSAP init multiple times through templates/popups.

2. **Targeting strategy**
   1. You use stable selectors:
      1. Classes and `data-*` attributes (often best)
      2. Avoid brittle auto-generated IDs or deeply nested selectors
   2. You scope animations per component instance:
      1. If a section repeats, each instance animates independently.

3. **Dynamic DOM awareness**
   1. You handle:
      1. Bricks popups/off-canvas that mount/unmount
      2. Query loops (unknown item count)
      3. AJAX-ish content changes (where applicable)
   2. You defend against missing elements (no console errors on pages where a component doesn’t exist).

4. **Compatibility with caching/minification**
   1. You know how to debug when:
      1. Scripts are deferred
      2. Order changes
      3. Minifiers rewrite or bundle unexpectedly

---

## 6) Maintainability (Code you can ship and revisit) 🧠

Pros are trusted because their work stays stable over time.

1. **Consistent patterns**
   1. You have a repeatable component pattern:
      1. Find root element
      2. Query children within root
      3. Create timeline/tweens
      4. Return cleanup function (when applicable)

2. **Configuration & “motion tokens”**
   1. You define shared constants for:
      1. Durations (fast/medium/slow)
      2. Eases (standard set)
      3. Distances (small/medium/large)
   2. You can adjust the entire site’s “feel” centrally without editing 40 tweens.

3. **Naming and documentation**
   1. Your code reads like intent, not like a puzzle.
   2. You leave notes where Bricks/WP behavior is non-obvious.

---

## 7) Accessibility & UX Responsibility ♿

This is non-negotiable at a pro level.

1. **Reduced motion**
   1. You respect `prefers-reduced-motion`:
      1. Provide alternative behavior (fade only, shorter motion, or none)
      2. Don’t punish users with broken layouts if animations are disabled

2. **Keyboard & focus**
   1. You don’t animate in a way that traps or loses focus.
   2. For modals/menus, you synchronize:
      1. Visual state
      2. ARIA state
      3. Focus management

3. **Avoiding “harmful” motion**
   1. You avoid aggressive parallax and excessive scrub on large sections unless there’s a strong reason.
   2. You consider readability for text animations (no over-kinetic type).

---

## 8) Performance Engineering (Smooth on real devices) ⚙️

Pros test on the devices clients actually have.

1. **Performance intuition**
   1. You understand the rough cost stack:
      1. Layout (often expensive)
      2. Paint (can be expensive)
      3. Composite (usually best-case)
   2. You choose properties and strategies that land you in “composite” territory (transforms/opacity).

2. **Profiling**
   1. You can use DevTools to:
      1. Spot long frames
      2. Identify layout thrashing
      3. Confirm smoothness during scroll

3. **Cleanup**
   1. You kill timelines and ScrollTriggers when they shouldn’t persist.
   2. You avoid duplicate instances after page builder edits, partial reloads, or popup reopens.

---

## 9) A Quick Self-Assessment (Score yourself) 🧾

Rate each item **0–2**:

1. **Design intent**
   1. I can explain the purpose of each animation.
2. **Tween fundamentals**
   1. I confidently use `to/from/fromTo`, easing, stagger, callbacks.
3. **Timelines**
   1. I structure sequences with labels/positioning (not delay hacks).
4. **ScrollTrigger**
   1. I can build responsive, calibrated triggers and debug them.
5. **Bricks/WP integration**
   1. My selectors are stable, scoped, and my scripts don’t duplicate.
6. **Accessibility**
   1. I respect reduced motion and keyboard/focus needs.
7. **Performance**
   1. I can profile, optimize, and keep things smooth on mobile.
8. **Maintainability**
   1. My code is modular, reusable, and documented.

**Interpretation**
1. **0–6**: You can build effects, but they may be fragile or inconsistent.  
2. **7–11**: You’re functional; pro habits are emerging.  
3. **12–16**: You’re operating professionally—now refine style, systems, and speed.