01 · Text revealNative
Motion with a purpose
Split text, revealed as it enters
When to use it: Headlines and short statements. One per section at most.
Scroll
On screen01Headline reveal
Webflow GSAP animation
Webflow GSAP animation, planned for performance, accessibility and your editors
ActiveSet builds GSAP animation on Webflow: text reveals, scroll storytelling, hover effects and page transitions. We use Webflow Interactions, which run on GSAP, wherever your team should be able to edit the motion, and custom GSAP code where the visual panel can't reach. Every effect has a reduced-motion version and keeps the real text in the HTML.
01 — Headline revealThis heading is plain text in the page source. GSAP splits it into lines for the reveal and labels it so screen readers read it once. Use it on a page's main headline, not on every heading.
In short
What is Webflow GSAP animation, and when do you need custom code?
GSAP is the JavaScript animation library Webflow acquired in 2024 and made free, plugins included, in 2025. The current version of Webflow Interactions, called Interactions with GSAP, runs on it, so most reveal, scroll, text and hover effects can be built visually in the Designer and reused in components.
We write custom GSAP code when an effect needs logic the Interactions panel doesn't offer, for example pointer-following buttons, a marquee that reacts to scroll speed, or one timeline that runs across several sections. Either way, we plan motion page by page, load code only where it runs, and give your team attributes and components they can reuse without touching code.
- Native first: Interactions with GSAP for any motion your team should be able to change.
- Custom GSAP code only where it adds something the native panel can't, documented in the project.
- Transform and opacity only, so animations don't shift the layout.
- A reduced-motion version for every effect.
- Real text in the HTML, so search engines and screen readers read the full heading.
Text reveals
Scroll storytelling
Hover states
Marquees
Page transitions
Rive and Lottie
Staggered grids
Pinned sections
02 — Words lit by scrollEach word lights up as it reaches the middle of the screen. The ticker below reverses when you scroll up, and has a pause button.
Live demos
Six kinds of motion, and when each one helps
Scroll through the panels. Each one is a working GSAP effect on this page, with a note on when we'd use it and how it behaves when your device asks for reduced motion.
03 — Letters assembleThe heading starts as scattered letters and settles as you scroll. It is the real heading the whole time; only its letters move.
02 · Scroll progressNative
Progress tied to scroll
When to use it: Long pages, step-by-step content, reading progress.
03 · StaggerNative
Items revealed in sequence
When to use it: Grids, logo walls and CMS lists, kept short.
04 · Directional hoverCustom code
The fill follows where the pointer enters
When to use it: Primary buttons and cards. Pointer devices only; a colour change on touch.
05 · MarqueeNative or custom
SplitText
ScrollTrigger
Flip
Draggable
MorphSVG
Observer
A loop that reacts to scroll direction
When to use it: Logos and short phrases. Needs a pause control past five seconds.
06 · Page transitionCustom code
Page 1
A short wipe between pages
When to use it: Brand sites and portfolios. Skipped with reduced motion.
04 — Six live demosThis section pins while you scroll and moves sideways through six effects. Each panel says when we'd use it and whether we'd build it in Webflow Interactions or custom code. Horizontal scrolling suits a short series of related items, not long reading.
Interactions or code
Webflow Interactions with GSAP or custom GSAP code?
Both run on the same GSAP engine. The choice comes down to what the effect needs to do and who will change it after launch.
| Interactions with GSAP (native) | Custom GSAP code | |
|---|---|---|
| How it's built | Visually, in the Interactions panel of the Webflow Designer | JavaScript in the site's custom code, using the GSAP library and plugins Webflow hosts |
| Good for | Reveals, staggers, text splits, scroll-triggered and scroll-linked effects, hover states, motion inside reusable components | Pointer-following and magnetic effects, marquees that react to scroll, sequences driven by CMS content, page transitions, effects that need custom logic |
| Who can change it | Anyone on your team with Designer access. Interactions can live in components and Shared Libraries, so they travel with them | Your team edits the content and adds the documented attributes. Changes to the logic go to a developer |
| Reduced motion | Built-in reduced-motion settings that honor the visitor's system preference | Handled in code with gsap.matchMedia(), which reverts the animation when reduced motion is on |
| Loading | Page scoping controls which pages load an interaction | Code loaded on the pages that use it, started when its section comes near the viewport |
| Watch for | Long, complex timelines get hard to read and maintain in the panel | Undocumented code turns into a dependency on one developer |
Use Interactions with GSAP by default, especially for motion inside components your team reuses. Write custom GSAP code only for effects the panel can't express, and document each one in the motion register so your team knows what it does and how to reuse it.
05 — Rows revealRows slide in one after another as the table enters, then the recommendation lights up letter by letter.
Work with ActiveSet
Planning animation for your Webflow site?
Send us your design or a site you like. We'll mark what Webflow Interactions can do, what needs custom GSAP code, and how each effect behaves with reduced motion.
Plan your site's motionWhat's included
GSAP animation we build on Webflow
Grouped by what the motion does for the visitor.
01
Motion plan
A page-by-page list of what moves, why it moves, and whether it's built with native Interactions or custom code, agreed before the build starts.
02
Text reveals
Line, word and character reveals with GSAP's SplitText. The full heading stays in the HTML and is read once by screen readers.
03
Scroll storytelling
Pinned sections, scroll-linked progress and horizontal showcases with ScrollTrigger, with a layout that still works on touch screens and with reduced motion.
04
Micro-interactions
Hover, magnetic and press states on buttons, cards and navigation that respond to the pointer without getting in the way of the click.
05
Marquees and tickers
Logo and text tickers built from real text, with a pause control when the movement runs longer than five seconds.
06
Card and image reveals
Staggered reveals for grids and CMS lists that work however many items the collection holds.
07
Page transitions
Short transitions between pages, skipped for visitors who prefer reduced motion.
08
Rive and Lottie
Rive and Lottie files placed alongside GSAP when an illustration needs its own animation.
06 — Staggered cardsThese cards fade and rise in sequence as the grid comes into view, using only opacity and position. Staggers help a visitor scan a grid in order; we keep them short so nobody waits to read. Cards also tilt toward your pointer.
How we build motion
Six rules every animation follows
Rule 1
Transform and opacity only
We animate position, scale, rotation and opacity, which browsers can animate without recalculating layout. Width, height and margins stay still, so content doesn't jump while the page loads.
1Rule 2
Load only where it runs
Webflow's GSAP setting loads the library across the whole site. For effects used on a few pages, we load the code on those pages only and start each animation when its section nears the viewport.
2Rule 3
Pause what's off screen
Loops, marquees and canvas effects stop when they scroll out of view, so they don't keep running in the background.
3Rule 4
Reduced motion on every effect
When a visitor's device asks for reduced motion, effects become a simple fade or no motion at all. No content depends on an animation finishing.
4Rule 5
Real text, visible without scripts
Headings stay as real text in the page source. SplitText adds labels so screen readers read each line once, and text starts visible, so it still shows if a script fails to load.
5Rule 6
Editor-safe handoff
Custom effects attach to documented attributes, such as a reveal or marquee attribute on an element. Your team adds the attribute to a new section in the Designer and the effect applies, with no code to edit.
6Animation is only worth adding if the page still loads well, reads well and stays editable. These rules apply to native interactions and custom code alike.
07 — Card fanThe six rules arrive as one stack and fan out as you scroll, like a hand of cards. On phones they become a simple list.
How it works
From motion brief to handover in five steps
We confirm the schedule after the motion plan, because it depends on how many effects need custom code.
01
Motion brief
Step 1
Motion brief
What should move, on which pages, and what each animation should help a visitor notice. We work from your design, a prototype or reference videos.
Step 2
Native or custom
Each effect is assigned to Interactions with GSAP or custom code, with its reduced-motion version and the pages it loads on.
Step 3
Prototype on staging
The key effects are built first on the staging site, so you can review timing and feel on real devices before the full build.
Step 4
Build and test
We test on desktop, tablet and phone, with reduced motion switched on, with a keyboard only, and with page speed checked before and after the motion goes in.
Step 5
Hand over
A motion register lists every effect, where it lives and how to reuse it, with a short recorded walkthrough for your team.
08 — Sticky stepsThe line fills as you scroll and highlights the step you're reading. Scroll-linked progress helps on long pages and step-by-step content; the steps themselves stay readable without it.
Delivered work
Animated Webflow sites we've built
- Oval Fertility2025–2026
A Webflow build with GSAP animation throughout: SplitText heading reveals, a parallax hero, staggered card reveals and a navigation bar that shrinks on scroll, alongside CMS pages and forms.
www.ovalfertility.com - Core Innovation (Core VC)2026
Refined the homepage design and built the site: a hero video that expands on scroll, light-dark-light section transitions, animated 'core wealth driver' cards, reveal and button micro-animations, then handed it over with recorded walkthroughs.
www.corevc.com - Spacekayak2024
Development partner for the design studio's own animated website: an animated menu, marquees, sticky and parallax sections, a horizontal timeline with a progress bar and a preloader.
www.spacekayak.xyz - Udemy Content Innovation Fund2026
A one-pager built in Webflow from Figma, with light and dark modes, a Rive hero animation and scroll interactions.
innovationfund.udemy.com
09 — List in focusThe client in focus is highlighted and its work appears beside it. Scroll or hover the list.
What the research says
Why motion and editability both matter
“both humans and LLMs take cues from the usability and presentation of your site.”
Webflow, The AEO playbook: How to optimize for AI-driven discovery, November 2025“64% found it outright difficult to tell vendors apart from their websites and messaging.”
Wynter, B2B Vendor Differentiation Survey: How buyers evaluate vendors in a market where everything sounds the same., June 2026“93% of marketing leaders report they are at least somewhat reliant on website developers, agencies, and/or expertise outside of their department.”
Webflow with Vanson Bourne, The 2026 State of the Website, 202510 — Floaty lettersPick a source: the letters of the next quote tumble in and settle. The quote is real text the whole time.
Interactive planner
Plan your motion: native or custom?
Pick the effects you have in mind and tell us who will edit the site. The planner suggests how each one should be built and what it does when reduced motion is on. Nothing you enter leaves your browser.
Which effects do you have in mind?
Who should be able to change the animations after launch?
Where will the motion run?
How we'd build each one
11 — Motion plannerPick effects and the plan updates. Nothing you choose leaves your browser.
FAQ
Frequently asked questions
Is GSAP free to use on a Webflow site?
Yes. Since April 2025, GSAP and all of its plugins, including formerly paid ones such as SplitText and MorphSVG, are free under GSAP's standard license, which covers commercial use. Webflow owns GSAP and hosts the library and plugins, which you switch on in your site settings.
Should we use Webflow Interactions or custom GSAP code?
Start with Interactions with GSAP, Webflow's native interactions, which run on GSAP and include text splitting, staggers and scroll triggers. Use custom code only for effects the panel can't express, such as pointer-following buttons or sequences driven by CMS content. Many sites use both.
Will animation slow down our Webflow site?
It can if it's built carelessly. We animate only transform and opacity, load code only on the pages that use it, start animations when their section nears the viewport and pause them off screen. We check page speed before and after the motion goes in.
Do text animations hurt SEO?
Not when the text stays in the HTML. Our text effects split real headings in the browser, so search engines and AI crawlers read the same words as before. We don't replace headings with images, video or canvas, and text starts visible in case a script fails.
How do you handle visitors who prefer reduced motion?
Every effect has a reduced-motion version. Native interactions use Webflow's reduced-motion settings, and custom code uses gsap.matchMedia() to switch effects off or down to a simple fade. Auto-moving content such as marquees also gets a pause control.
Can our team edit animated sections without breaking them?
Yes, that's part of the build. Native interactions can live inside components and Shared Libraries, and custom effects attach to documented attributes your team can add in the Designer. The motion register at handover lists every effect and how to reuse it.
Can you add animation to our existing Webflow site?
Yes. We start with a motion plan for the pages that matter most, check how the current interactions and scripts load, and add or replace effects on staging before anything goes live.
What do you need from us to start?
A design file, a prototype or a few reference sites, plus a list of the pages you want to animate. Rive or Lottie files are welcome where an illustration has its own animation.
How long does animation work take, and what does it cost?
It depends on the number of effects and how many need custom code. We confirm both in a scoped proposal after the motion plan.
12 — Smooth answersAnswers slide open and closed instead of jumping.
Give your Webflow site motion with a purpose
Send us your design, a prototype or a site you like. We'll mark which effects use Webflow Interactions, which need custom GSAP code, and how each one behaves with reduced motion.
13 — Giant typeThe closing line slides across the screen and its letters tilt with your scroll. The button leans toward your pointer.