You've probably just watched a 40-second clip where I showed the one way to build a $10,000-looking website that actually works. I've tested every version of that claim — most are fake, the rest cost real money. This is the only one I could verify myself, and it's completely free. The tool is GSAP, a free animation library. The trick is letting Claude read a demo you like and rebuild it with your own content. Estimated read: 7 minutes. Estimated time to your first animation: about five minutes once Claude is installed.
What you'll have at the end
- A real animation library — GSAP — wired into your project. Every premium plugin (ScrollTrigger, SplitText, MorphSVG) is now 100% free.
- A repeatable loop: find a demo you like, hand Claude the link, get it rebuilt with your own photos and copy.
- Your first scroll-driven animation running on your own page in about five minutes.
- An eye for what reads as "expensive" — plus a shortlist of where to find more.
Total time to your first animation: ~5 minutes once Claude is installed.
Before you start
You barely need anything — Claude builds the page for you. There's no existing site to bring. Everything else, including GSAP, it installs along the way.
| Requirement | What for | How to check |
|---|---|---|
| Claude Code | Reads the demo, installs GSAP, and writes the page | Installed & signed in — run claude |
| The GSAP skill | Gives Claude GSAP's real API so the animation is solid, not guessed | One-time install — see below |
| A browser | Find demos, preview the result | Chrome, Safari, Arc — any modern one |
| Your own photos (optional) | To make the animation yours, not the demo's | Any images on disk — or skip and use the demo's |
Install the GSAP skill (once)
Just ask — the first time you do this. It hands Claude GSAP's current reference so it writes against the real library instead of a stale memory.
> Install the GSAP skill for me.No GSAP account needed. As of 2025, GSAP is fully free — Webflow acquired GreenSock and unlocked every plugin. Ignore any old tutorial telling you to buy "Club GreenSock."
Read this first
Give Claude the link — not a screenshot.
The one rule: Hand Claude the live demo URL, not a picture or a screen recording of it. Claude opens the page, reads the real GSAP code behind the motion, and rebuilds it. A screenshot gives it nothing to copy — just pixels.
Your instinct is to screenshot the animation or describe it. Don't. Claude reads the demo's real ScrollTrigger code from the URL and reproduces the easing, timing, and scroll behavior exactly — adjectives like "smooth" get lost; a link doesn't.
One catch: CodePen sits behind Cloudflare, so Claude sometimes can't read a codepen.io link directly. When that happens, point it at demos.gsap.com instead — every demo there is fetchable and free to lift.
Do this instead: paste the URL
Skip the screenshot. Copy the demo's address straight from the browser bar and give Claude that — it can only guess from pixels, but it can copy from code:
> Recreate the scroll animation at
demos.gsap.com/demo/scrubbed-bento-gallery/ using my own photos.Step 01 — Find an animation you like
Browse until something makes you ask "how much did that cost?" — that's the one.
A. Open GSAP's demo gallery. Go to demos.gsap.com (or the showcase at gsap.com/showcase). Scroll. These are real, production-grade animations — pinned scrolls, image reveals, parallax, SVG morphs — all free to lift.
demos.gsap.com/demo/scrubbed-bento-gallery/
# the one from the video: a bento grid that scales as you scrollB. Copy the link. When one grabs you, copy the URL straight from the address bar. That link is the spec — don't screenshot it, don't describe it (see Read this first).
Tip — pick a scrubbed animation (motion tied to scroll position) for your first one. They read as the most expensive, and they're the most forgiving to retarget onto your own content.
Step 02 — Paste the link into Claude
One sentence. Claude reads the demo and rebuilds it inside your project.
A. Open Claude in your project. From your project folder, run claude (or open the desktop app on that folder). Start a fresh chat so the context is clean.
> cd my-site && claudeB. Invoke the GSAP skill with the link. Type /gsap-skills, paste the demo's link, and say what to use instead of its placeholder content. That's the whole prompt.
> /gsap-skills
Copy this scroll animation: demos.gsap.com/demo/scrubbed-bento-gallery/
Use my own photos — or find some online if I don't have any.Claude will read the demo's GSAP + ScrollTrigger code, install GSAP (free), rebuild the markup with your images, and hand you a file you can open in the browser.
Tip — if Claude says it can't fetch the link (Cloudflare on CodePen), paste the pen's code into the chat yourself, or switch to a
demos.gsap.comlink. See Read this first.
Step 03 — Make it yours
The loop where it starts to feel like cheating.
A. Describe the changes in plain English. Now iterate. Each prompt is seconds. Swap the photos, change the hero, slow the scrub, round the corners:
> Use my own photos for the grid, and make the center tile the hero.
> The cards pull apart as I scroll — they should scale together instead.
> Round every corner 16px and slow the scroll animation down a touch.B. Preview, then tweak. Open the file in your browser, scroll, react. Tell Claude what's off. The entire point is that fixing it costs one sentence, not an afternoon.
Tip — describe motion as what moves and how, not adjectives. "The grid scales as one unit; the center tile grows in place" beats "make it smoother" — and gets it right in one pass.
Find it. Paste it. Make it yours. The iteration cost drops to near zero — that's the whole trick.
How to get it right faster
You won't touch any code — these are just ways to talk to Claude so it nails it sooner.
| Do this | Why it helps |
|---|---|
| Always paste the live URL, never a screenshot | Claude copies the real animation instead of guessing from a picture. |
| Start with a scroll-driven animation | They look the most expensive — and they're the easiest to make your own. |
| Change one thing per prompt | You can see exactly what each tweak did, and undo it if you don't like it. |
| Say it in plain English | "Make the middle photo the hero" works — you never need a code word. |
| Keep your photos in one folder and point Claude there | It swaps them in for the demo's placeholders in one shot. |
| Ask Claude to save each version | So you can always say "go back to the way it was two prompts ago." |
| Preview, react, repeat | The whole loop is: look, tell Claude what's off, look again — in seconds. |
Free animations — where to steal from
GSAP's own galleries are the best hunting ground — all free, all fetchable.
- demos.gsap.com — the official demo gallery. Pinned scrolls, image sequences, SVG morphs. Copy any link and hand it to Claude.
- gsap.com/showcase — real shipped sites built on GSAP. The best place to learn what "expensive" actually looks like.
- CodePen → GreenSock — thousands of pens on the GreenSock account. Heads up: CodePen is Cloudflare-gated, so copy the pen's code rather than the link.
Personal favorites:
- Scrubbed bento gallery — the one from the video; a grid that scales as you scroll.
- Image-sequence scrub — a video that scrubs frame-by-frame on scroll. Looks absurdly premium for how little it is.
- Pinned horizontal scroll — sections that slide sideways as you scroll down the page.
Common gotchas
"Claude can't open the CodePen link" — CodePen sits behind Cloudflare. Copy the pen's code into the chat directly, or use a
demos.gsap.comlink instead — those are fetchable.
"The grid cells pull apart as I scroll" — each cell is being tweened on its own. Tell Claude to scale the parent container as one unit — the gaps stay uniform and everything moves together.
"My base zoom disappears when the animation runs" — GSAP overwrites the element's
transform. Wrap the element in adivand put the static transform on the wrapper, so the tween and the base scale don't fight.
"The animation is janky / sizes look wrong" — Claude is probably reading dimensions mid-animation. Ask it to measure once on load (and on resize), cache the values, and never re-read while a tween is running.
"It looks nothing like the demo" — you likely described it instead of linking it. Give Claude the URL so it can read the real code (see Read this first).
What to learn next
Once the loop feels comfortable, three directions to grow.
- ScrollTrigger, deeper. Learn
pin,scrub,snap, andtoggleActions. Those four knobs let you read any GSAP demo and predict exactly how it'll behave. - SplitText for headlines. Animate text by character or line on entrance — now free, and it makes hero copy feel alive.
- Drop it into a real build. Ask Claude to layer a GSAP animation into your actual homepage — React, Astro, or plain HTML — not just a standalone demo.
That's the whole trick. Find an animation, paste the link, make it yours. Now go make a website that looks like it cost $10,000.