How it moves.
Every animation on this template is either a native IX3 interaction or one small, labelled GSAP block. This page explains each one: what it does, where it is used and exactly what to change.
Before you edit
- Where the code lives: GSAP 3, ScrollTrigger, SplitText and ScrambleText are loaded by Webflow's built-in GSAP integration (Site settings → GSAP, with those three plugins switched on); nothing loads from a CDN. Site settings → Custom code: Head code holds font smoothing and hides the page for a split second until the preloader or page transition is ready (so nothing flashes), showing it within 3 seconds at most. Footer code holds only the MONOFORM script (blocks G1–G32); if a plugin is switched off in Site settings → GSAP, the page stays static instead of breaking.
- Styling is native: every colour, size and state is a class or Variable in the Designer. GSAP only animates — change looks in the Style panel, change motion here.
- State classes: navbar_component is-scrolled and is-hidden are added by G4. They are not applied in the Designer, so do not delete them with “Clean up unused styles”.
- Preview: custom code does not run in the Designer canvas. Check effects on the published site.
- Reduced motion: visitors with “reduce motion” turned on get no GSAP effects and IX3 skips its animations.
How to Edit GSAP Animations — Element map
Each GSAP effect is one labelled block in the footer code. This map shows which element or custom attribute each block controls.
The site uses native browser scrolling. G1 locks scrolling while the preloader plays and makes “Back to top” links glide up.
Every page. Sticky elements use CSS position: sticky on their class in the Designer.
Every time the Home page loads, a counter runs 0 → 100, then the panel slides up and the hero intro (G5) plays.
Global UI component. Hidden (display: none) in the Designer; GSAP shows it.
Off by default. Set PAGE_TRANSITIONS = true and internal links slide the panel over the page before the next page opens.
All internal links. New-tab, mailto:, tel: and #anchor links are skipped.
Adds the combo class is-scrolled after 8px and is-hidden when scrolling down past 400px.
Navbar component. Style both combo classes in the Designer.
Hero headings rise line by line from a mask with a slight tilt, the pill image in the Home headline grows open, then load-fade content follows.
Every page hero. Runs after the preloader / transition.
Headings rise line by line when they scroll into view.
Section headings on every page.
Content fades in while moving up 60px.
Paragraphs, buttons, cards.
The direct children appear one after another.
Stats, values, team, offices grids.
Image wrappers wipe up while the image zooms out from 135%.
Cards, team, gallery, offices, featured post.
Words brighten from 15% to 100% opacity while scrolling.
Home intro statement, About story.
Images drift −6% → 6% inside their wrapper.
Hero images, project gallery.
Hero images open from the sides (or from the clip-path set on the class to full bleed) while scrolling.
Home hero, About hero, Project and Article templates.
The big footer letters rise one by one.
Footer component.
Process cards stick with CSS sticky; as the next card slides over, the one below scales to 92% and dims (desktop only).
Home → How we work · About story · FAQ · Article sidebar · this page's menu.
The logo row loops forever and speeds up with scroll velocity.
Home → logos.
Project images lean with fast scrolling, then settle.
Home → Selected work, Work page.
Whole numbers count up from 0 when they appear.
Home and About stats.
Small mono labels decode like a terminal.
Every section label.
The page cross-fades to the Theme ‘Dark mode’ colours while a marked section is centred.
Home → How we work · About → Awards · Project → Results.
The round badge spins and adds rotation on scroll; the green status dot pulses.
Home hero.
Footer content rises slightly slower than the page.
Footer component.
On mouse devices a dot follows the pointer; over [data-cursor] elements it grows into a labelled disc.
Work cards (View), blog cards (Read), next project (Next).
Image zoom on cards, arrow rotation + fill, rolling button text, button icon nudge, logo spin.
Every page (mouse devices).
A floating image follows the cursor over the services list and tilts with its speed; image N matches row N.
Home → What we do (desktop).
Buttons are pulled toward the pointer and spring back with an elastic ease. Strength is set by MAGNETIC (0 = off).
Every button on mouse devices. Add the custom attribute data-magnetic to make any other element magnetic.
When the page height changes without a window resize (for example switching a category tab), every scroll trigger is recalculated so effects below it, like the footer wordmark (G13) and footer parallax (G21), still play at the right moment.
Work and Blog category filters. Runs automatically; nothing to set up.
The word is written on like a pen, the way the iPhone “hello” appears: its outline is traced from left to right, then the ink fills in. The word stays normal text in the Designer, so type any word and it will be handwritten in the span’s own font. Speed is set by HANDWRITE_SECONDS. Inside a load-lines heading it plays with the page intro (G5); anywhere else it plays when scrolled into view. Avoid split-lines headings.
The hand-script word in the H1 on Home, Work, Blog, About and Contact. To add it elsewhere, select a span and add the custom attribute data-animate = handwrite.
GSAP sizes the big Monoform wordmark so it always spans exactly 100% of the container on every screen, then fits it again after the letters are split for G13. Change the word in the Designer and it still fits.
Footer component, every page. Runs for everyone, including reduced motion.
Each gallery slot is bound to a CMS image field. When a field is left empty, GSAP hides that slot so the gallery never shows a blank tile.
Project pages. Fill or clear the image fields in the Images group of each project. Runs for everyone, including reduced motion.
Type a ★ in a project result value (e.g. 4.8★) and GSAP swaps it for an outlined star drawn to match the Geist font: cap height, matching stroke weight, sitting on the baseline. Screen readers hear “4.8 stars”.
Project pages → results strip. Runs for everyone, including reduced motion.
Each checkbox or radio chip gets the combo class is-checked (on the chip and its input) while it is selected, with a small press bounce. Style the selected look on form_checkbox › is-checked and form_checkbox-input › is-checked; radios use the is-radio combo for a round indicator.
Contact form → I’m interested in, Budget.
The blur fixed to the bottom of the screen slides down out of view when you scroll into the footer’s bottom row (links and copyright), and slides back as soon as you scroll up, so the end of every page is never blurred.
Global UI, every page. Edit the blur strength on the blur-layer classes in the Designer.
Customizing key variables
Removing GSAP animations
- Open Site settings → Custom code → Footer code.
- To remove one effect, delete its whole block — from the comment line
/* G… */down to the line before the next/* G… */comment. Every block is independent. - To remove all GSAP animations, delete the five GSAP <script src> lines and the MONOFORM script. The site keeps working: content is visible, the IX3 menu and FAQ still run, sticky columns keep working.
- If you remove G2/G3, you can delete the Preloader and Transition elements inside the Global UI component (they are hidden by default).
- Publish the site. GSAP never runs inside the Designer canvas, so always check effects on the published or staging site.
Native interactions
The click interactions run on Webflow Interactions — edit them visually in the Interactions panel. All scroll and hover motion is GSAP (see the element map above): give any element a data-animate value from the map to add that effect.
Projects & Articles
- Featured: the Featured switch puts a project on the Home page (up to 4) and pins one article to the top of the blog.
- Filters: the Work and Blog pages use native Tabs. Each tab holds a Collection List filtered by Category — to add a category, add an option to the Category field, duplicate a tab and change its list filter.
- Next project / Related articles: choose them per item with the Reference fields “Next project” and “Related articles”.
- Every field has help text in the CMS editor explaining what it controls.
Inline SVG code
- Icons (arrows, plus, menu, social) are inline SVGs with the class icon-svg. They use
currentColor, so they follow the text colour of their parent. To swap one, replace the SVG code inside the element. - Hero badge (Home) is an SVG with a circular path and text on it. Edit the words inside the textPath element; keep the “ • ” separators so the text wraps evenly around the circle.
- Logo mark in the navbar and page transition is an SVG; replace it with your own mark at the same size (1.5rem / 3rem).