Animate Anything in WordPress with Claude Code + GSAP

This tutorial shows how to integrate GSAP animations into WordPress using CloudCode and an MCP (NovaMira). It covers installing NovaMira, adding official GSAP skills, connecting an AI agent (Cloud Code/Claude), creating guardrails with a cloud MD file, and deploying animation snippets via a code-snippet plugin for safe, reusable effects. Demonstrations include text reveals, scroll-triggered animations, custom cursors, SVG morphs, and an extensible prompt library.

– Setup: Install and configure NovaMira, enable AI abilities, generate an application password, then connect Cloud Code to the site (local or hosted) so the agent can crawl the site and available bricks variables.

– GSAP skills: Add official GSAP AI skills (download zip, npm command, or upload via NovaMira). Place skills in a .cloud/skills folder for local projects or upload into NovaMira for server/staging sites.

– Safety & workflow: Create a cloud MD file with strict guardrails: require all generated code go into a snippet plugin (e.g., Fluent Snippets), restrict use to existing core variables/classes, and mandate manual review/publish of snippets.

– Practical demos & QA: Use classes/IDs to attach effects (text scrub, character reveal, cursor, SVG morph), iterate when animations misbehave, and add quality-control steps so the AI reviews code, fixes bugs, and confirms activation before handing off.

Quotes:

Using CloudCode in WordPress with GSAP literally just unlocks all the powers that GSAP could do.

If something does go wrong, we could just unpublish that snippet.

It is now ridiculously easy once we have everything set up.