← All videos

GSAP

From GSAP Snippet to Elementor Widget (Full Process, Angie + MCP)

I take the GSAP full screen menu from an earlier video, which was a hardcoded snippet, and turn it into a native Elementor widget. Angie writes and refactors the widget code, and the Elementor MCP gives it access to Elementor’s widget schemas, document tree and styling APIs, so the result has proper Elementor controls.

The GSAP animation itself stays in the script; what changes is everything around it. This is for web designers who want to package their own GSAP effects as widgets anyone can drop in and style.

What I cover

  • Start from the existing GSAP full screen menu snippet
  • Use Angie together with the Elementor MCP through Claude Code
  • Add controls for the hamburger toggle, the WordPress menu, the image panel, a CTA button and social icons
  • Add Elementor style controls for typography, colours, borders and shadows
  • Keep the markup semantic and accessible
  • Test the widget and submit it to the Angie community library
Watch on YouTube