# Using AI to Customize GSAP Effects > Use ChatGPT, Claude, and other AI assistants to customize, integrate, and debug GSAP Vault effects. Includes prompts and workflow tips. Published 2026-02-03 by Jake. Canonical: https://gsapvault.com/blog/using-ai-assistants-gsap-effects --- GSAP Vault effects are built for however you like to work. Prefer to dive into the code and tweak things yourself? Every effect is clean, commented, and ready to customize. Prefer to work with an AI assistant? We've built for that too—with structured documentation, annotated code, and copy buttons optimized for pasting into ChatGPT, Claude, Cursor, or whatever tool you use. This guide covers the optional AI-assisted workflow and how to get the most out of it. AI is not required: every download still includes readable source and a detailed README for developers who prefer to work directly with the code. See the complete overview of our [vibe-code ready GSAP effects and templates](/vibe-coding). ## The AI-First Workflow When you purchase an effect from GSAP Vault, you're not just getting code—you're getting code that's ready to be understood. Each effect includes: - **README documentation** with options, triggers, and examples - **Annotated code** with clear function names and comments - **`START-HERE-AI.md`** with a product-specific, copy-paste integration prompt - **Copy buttons** that format code specifically for AI assistants The setup prompt tells your assistant to inspect your existing project before editing, reuse its conventions, preserve the supplied design and accessibility, add framework-appropriate GSAP cleanup, and report what it changed and tested. It complements the README rather than replacing it. This works because GSAP Vault effects are built to be understood—clean structure, clear documentation, production-tested patterns. That's what makes AI customization effective rather than frustrating. You can paste an effect into ChatGPT, Claude, Cursor, or any other AI tool and ask questions immediately. No need to explain what the code does—the structure speaks for itself. Whether you're working with a [text decode effect](/effects/text-decode), a [scroll-triggered reveal](/effects/split-text-reveal), or an [infinite marquee](/effects/infinite-marquee), the workflow is the same. ## Three Ways to Use AI with Effects ### Quick Reference **When to use:** Quick questions, understanding options, small tweaks. On any effect page, click the **Copy** dropdown and select **Copy Reference**. This copies just the README documentation—typically around 800 tokens. Enough context for your AI to understand the effect without overwhelming the conversation. **Example prompt:** > Here's the documentation for a text scramble effect: > > [paste reference] > > How do I make the scramble animation faster? The AI can answer from the documentation alone, pointing you to the right data attribute or option. ### Full Code Context **When to use:** Major customizations, debugging issues, understanding how something works internally. Select **Copy Full Code** from the same dropdown. This copies the complete HTML, JavaScript, and CSS in a structured format that AI assistants parse well. **Example prompt:** > Here's a GSAP scroll reveal effect I'm using: > > [paste full code] > > I want to change this so elements animate in from the left instead of fading up. What do I need to modify? With full code context, the AI can see exactly how the animation is built and suggest precise changes. ### Sharing a URL **When to use:** Discovery, getting recommendations, when you don't have the effect yet. Some AI assistants (like ChatGPT with browsing, or Claude with web access) can read URLs directly. Share an effect page URL and ask questions: > Can you look at gsapvault.com/effects/text-decode and tell me if this effect would work well for a portfolio hero section? For machine-readable discovery, GSAP Vault also provides [llms.txt](/llms.txt)—a structured summary of all available effects that AI tools can parse. ## Prompts That Work Well Here are practical prompts you can adapt for your own customizations: ### Changing Animation Behavior > [paste code] — Change this to trigger on hover instead of scroll. > [paste code] — Add a 0.5 second delay between each letter animating. > [paste code] — Make the animation play in reverse when scrolling back up. ### Framework Integration > [paste code] — Convert this to work in a React component. Make sure animations clean up when the component unmounts. > [paste code] — I'm using Next.js with the App Router. How should I initialize this effect? > [paste code] — Adapt this for Vue 3 using the Composition API. ### Understanding the Code > [paste code] — Explain how the stagger calculation works in this animation. > [paste code] — What does the ScrollTrigger 'scrub' option do here, and what would happen if I changed it to scrub: 0.5? ### Debugging > [paste code] — The animation works on desktop but not on mobile. What might be causing this? > [paste code] — Elements animate in, but when I scroll back up and down again, nothing happens. How do I make it retrigger? ## Tips for Better Results **Be specific about what you want.** "Make it faster" is vague. "Reduce the animation duration from 0.8s to 0.3s" gives the AI exactly what it needs. **Include your environment.** Mention if you're using React, WordPress, vanilla JS, or a specific bundler. GSAP behaves similarly across environments, but initialization patterns differ. For platform-specific guidance, see our tutorial on [adding GSAP effects to WordPress](/blog/text-scramble-wordpress). **Ask for accessibility considerations.** A good prompt: "Modify this to respect prefers-reduced-motion and add appropriate ARIA attributes." The AI will often add things you'd forget. The [MDN Web Docs on prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) are a useful reference for understanding what this media query covers. **Request code comments if you're learning.** When you want to understand *why* something works, ask: "Add comments explaining each line of the animation setup." **Paste error messages.** If something's broken, include the exact console error. AI assistants are remarkably good at diagnosing GSAP-specific issues. ## When AI Helps Most AI assistants excel at: - **Framework integration** — Converting vanilla JS to React/Vue/Svelte - **Quick customizations** — Changing timing, easing, trigger points - **Explaining code** — Understanding what each part does - **Debugging** — Diagnosing why animations don't fire - **Combining effects** — Making two effects work together on the same page (like pairing a [magnetic cursor](/effects/magnetic-cursor) with a [stagger grid reveal](/effects/stagger-grid-reveal)) Read the documentation directly when: - **You want to see all available options** — READMEs list every data attribute - **You're exploring edge cases** — Docs cover specific scenarios AI might not mention - **You need the original behavior** — To compare against your modifications The best workflow often combines both: scan the README to understand what's possible, then ask AI to implement the specific change you want. ## A Real Example Let's walk through an actual customization. Say you have the text scramble effect and want to: 1. Trigger on hover instead of scroll 2. Use different characters for the scramble 3. Make it faster Your prompt might look like: > Here's a text scramble effect that triggers on scroll: > > [paste full code] > > I want to modify it so that: > 1. It triggers when I hover over the element instead of on scroll > 2. The scramble uses only numbers (0-9) instead of letters > 3. The total animation completes in 0.3 seconds instead of the current duration > > Show me the modified JavaScript. The AI will return updated code addressing all three points. You can then ask follow-up questions: "What if I want it to reverse when the mouse leaves?" or "How do I apply this to multiple elements?" ## Getting Started Next time you're working with a GSAP Vault effect: 1. Open the effect page 2. Click **Copy** → **Copy Setup Prompt**, or download the ZIP and open `START-HERE-AI.md` 3. Add your project goals or requested customisation 4. Paste it into your AI assistant and let it inspect your project before editing 5. Review the reported changes and test the result For quick questions, **Copy Reference** sends the README context; for deeper modifications, **Copy Full Code** sends the HTML, JavaScript, and CSS together. The effects are built to be understood—by you and by AI. Use that to your advantage. If you're new to GSAP itself, the official [GSAP getting started guide](https://gsap.com/docs/v3/Installation/) is a solid foundation before diving into AI-assisted customization. --- ## Related Articles - **[Animation for Content Editors](/blog/animation-for-content-editors)** — The vocabulary to understand what's possible before customizing effects with AI. - **[Animate on Scroll: 3 Approaches Compared](/blog/how-to-animate-on-scroll)** — Understand the scroll animation fundamentals that AI assistants help you customize. - **[Adding a Text Scramble Effect to WordPress](/blog/text-scramble-wordpress)** — A step-by-step example of integrating a GSAP effect into a specific platform. - **[GSAP vs CSS Animations: A Practical Guide](/blog/gsap-vs-css-animations)** — Know when GSAP is the right tool so you can ask your AI assistant the right questions.