How to Create GSAP Animations in Webflow Using Claude and Flowboard

How to Create GSAP Animations in Webflow Using Claude and Flowboard

See the Video by Magnaem for Memberstack here!

TL;DR

You do not need to master the GSAP timeline in Webflow to create professional animations. By combining Claude (to generate GSAP animation scripts from your HTML) with Flowboard (to convert those scripts into Webflow elements), you can animate entire sections without building a single GSAP timeline from scratch. The workflow takes minutes and the results are fully editable inside Webflow’s added GSAP Interactions panel afterward.

All images in this article are screenshots from the above linked video unless otherwise stated.

Why This Workflow Exists

The GSAP timeline inside Webflow is powerful, but it can be intimidating for designers who are not comfortable building animations from scratch. This AI workflow sidesteps the timeline entirely by using Claude to write the GSAP code and Flowboard to bring it into Webflow.

The result is the same: working GSAP animations tied to your Webflow elements. The difference is how you get there.

The Workflow, Step by Step

Step 1: Inspect and Copy Your HTML

Start with a section you have already built in Webflow. Right-click the section in your browser, choose Inspect, find the section in the elements panel, right-click again, and copy the element. This is the raw HTML that you will feed into Claude.

Step 2: Generate GSAP Animations with Claude

Paste your HTML into Claude along with a prompt that tells it exactly what you need. The prompt used in this workflow asks Claude to:

• Generate a Flowboard-mappable GSAP animation for the provided HTML
• Follow the Flowboard guide for compatibility
• Use simple class selectors only
• Only reference classes that appear verbatim in the HTML
• Output the original HTML unchanged, plus a separate script block containing all GSAP animations

Claude returns the HTML with a companion script block containing the animations, plus a selector map showing which animations are tied to which elements.

The prompt used in the related video is linked in the video description here.

Step 3: Set Up Flowboard

Flowboard is a browser extension that converts HTML and GSAP code into Webflow elements. To use it:

1. Create a Flowboard account
2. Install the Flowboard browser extension
3. Link your account inside Webflow using the Flowboard icon in the Designer
4. An upgraded account removes paste limits for larger HTML blocks

Step 4: Convert and Paste Into Webflow

Paste your Claude-generated HTML into Flowboard and click "Convert to Webflow." Flowboard converts the HTML and GSAP animations into Webflow-compatible elements that you can paste directly into your project.

Step 5: Map Animations to Elements

One thing to watch for: Flowboard may drop your class links during the conversion. If that happens, you will need to manually link each animation to its corresponding element.

The workaround is straightforward:

1. Check the order of animations in Claude's selector map
2. In Webflow's GSAP timeline, click each animation
3. Link it to the correct element by selecting "element" instead of "class"
4. Follow the same order for each animation until all are mapped

Once the animations are linked, you can delete the duplicated section that Flowboard created and keep your original section with the newly mapped GSAP animations.

Step 6: Test and Rename

Preview the page to verify the animations work. Then rename each animation in the GSAP timeline from the default numbers to descriptive names (like "hero heading" or "card fade in") so you can track which animation is which as you continue building.

From Here, Just Tweak

Once the animations are in Webflow, they are fully editable. Adjust timing, easing, delays, and sequencing directly in the GSAP timeline. The AI workflow gets you to a working baseline fast. The creative refinement is still yours to do.

This same approach also works for HTML to Webflow conversions. Ask Claude to generate HTML and CSS, then use Flowboard to convert it into paste-ready Webflow elements.