[ Instructions ]

Instructions

A short guide to editing the icons, slider and animations used in Ironclaw.

Editing SVG icons

Arrow and phone icons are inline SVG elements, so they take the text color of their parent and change color on hover. To change an icon, select the SVG element in the Navigator and edit its path in the element settings, or replace it with your own SVG. To resize an icon, change the width and height on its class (for example icon-arrow or hero_card-arrow).

Hero slider

The home hero uses the native Webflow Slider. Select hero_slider and open its settings to change autoplay, delay and animation. To add a slide, select a hero_slide and duplicate it, then update the text, link and background image. Each slide background image sits inside hero_slide-bg.

Animations

Every animation in Ironclaw runs on GSAP. Almost all of it is built with native Webflow Interactions, which you edit visually in the Interactions panel. One small custom script animates the home hero slider. No GSAP files are added by hand.

How GSAP is set up

  • GSAP 3.15.0 and ScrollTrigger: loaded automatically by Webflow on every published page, because the site uses Webflow Interactions with scroll triggers. There is no registered GSAP script to install or update.
  • SplitText: loaded automatically by Webflow on /about only, where the Statement interaction splits the paragraph into words.
  • HeroSliderAnimation: one registered custom script, applied to the Home page footer (Page settings, Home, Custom code). It uses the GSAP that Webflow already loads (window.gsap), so it adds no library of its own.
  • Reduced motion: scroll reveals skip to their final state for visitors who prefer reduced motion, and the hero script does not animate for them. Scroll-scrubbed effects (Testimonials fan, Case studies horizontal scroll, Process cards, Service intro fan) run on desktop only.

To edit a native interaction, select its trigger element in the Navigator, open the Interactions panel and choose the interaction by the name in the element map below. Interactions play in Preview and on the published site.

Interaction element map

Each line shows the interaction name as it appears in the Interactions panel, its trigger and the class it targets.

Site-wide (Navbar, Footer, buttons, page header)

  • Nav hamburger toggle: click on .nav_hamburger turns the lines into an X (tablet and below).
  • Nav button hover: hover on .nav_button rolls the text.
  • Nav dropdown chevron: hover on .nav_dropdown rotates the chevron 180 degrees.
  • Button icon hover: hover on .button moves .button_icon 4px to the right.
  • Button pill hover: hover on .button-pill rolls the text and slides the icon.
  • Footer link hover: hover on .footer_link rolls the link text.
  • Page header reveal on load: page load fades in the page header title, breadcrumb and image on About, Services, Work, Blog, Contact, Changelog, Style Guide, Licenses, Instructions and the Case study template.
  • Page header title roll: hover on .page-header_title-wrap rolls the title.

Home

  • Hero slider: custom script, see How to Edit GSAP Animations below.
  • Work card hover: hover on .work_card.
  • Services header reveal and Services rows reveal: scroll into view on .services_header and .services_row, fade up.
  • Services row hover: hover on .services_item fills the background and slides the arrow in.
  • Testimonials fan on scroll: scrolling through .testimonials_stage fans the cards out (desktop only, scrubbed).
  • Case studies horizontal scroll: scrolling through .cases_track moves .cases_slide to the left (desktop only, scrubbed).
  • Case card hover in and Case card hover out: hover on .cases_card sweeps the colour bars and turns the image to colour.
  • Blog card hover: hover on .blog_card shows the Read now overlay and zooms the image.
  • CTA box reveal: scroll into view on .cta_box.

About

  • Statement words light up on scroll: scrolling .statement_text lights each word from 28% to 100% opacity (uses SplitText).
  • Awards header reveal and Awards rows reveal: scroll into view on .awards_header and .awards_row.
  • Awards row line hover: hover on .awards_row.
  • Team header reveal and Team card reveal (column 1, 2, 3): scroll into view on .team_header and .team_card, staggered by column.
  • Process cards slide up on scroll: scrolling through .process_track stacks the process cards (desktop only, scrubbed).

Services

  • Service intro fan on scroll: scrolling through .service-intro_stage fans the cards out (desktop only, scrubbed).
  • Service card hover: hover on .service-intro_card lifts the icon.
  • Story card hover: hover on .stories_card zooms the image and slides the arrow in.

Work

  • Portfolio header reveal and Portfolio item reveal (column 1, 2, 3): scroll into view on .portfolio_header and .portfolio_item.
  • Portfolio card hover: hover on .portfolio_card.

Contact

  • Contact header reveal and Contact form reveal: scroll into view on the heading and .contact_form-block.
  • Contact submit icon hover: hover on .contact_submit moves the icon 4px.

CMS templates

  • Case overview reveal and Case cover image reveal: scroll into view on .case-overview_top and .case-overview_image-wrapper.
  • Related header reveal: scroll into view on .related_header (both templates).
  • Related card hover: hover on .related_card (desktop only).
  • Post header reveal on load: page load on the Blog Posts template header.
  • Post cover reveal: scroll into view on .post-body_image-wrapper.
  • Related post reveal (column 1, 2, 3): scroll into view on .related-posts_item.

Utility pages

  • Changelog reveal: scroll into view on the changelog list.
  • Reveal 404 content on page load: 404 page.
  • Reveal password content on page load and Password button icon hover: Password page, hover on .password_button-wrap.

How to Edit GSAP Animations

The hero slider is the only custom code in Ironclaw. It is a registered script named HeroSliderAnimation, applied in Page settings → Home → Custom code (footer). It runs on Webflow's built-in GSAP 3.15.0, so there is no separate GSAP script, and it does not use ScrollTrigger. Custom code only runs on the published site, not in the Designer canvas.

Hero script element map

  • .hero_slide-image — background zooms from 108% to 100% over 3 seconds each time its slide becomes active.
  • .hero_card — fades and moves up when its slide becomes active.
  • .hero_text — fades and moves up 0.15s after the card.
  • .hero_slide — the script watches each slide’s aria-hidden attribute, which the Webflow Slider changes when a slide becomes active.

Customizing key variables

The four values at the top of the script control the motion:

var DURATION = 0.7;      // text fade-up length in seconds
var STAGGER = 0.15;      // delay between card and text
var ZOOM_FROM = 1.08;    // background start scale
var ZOOM_DURATION = 3;   // background zoom length in seconds

To slow the text reveal, increase DURATION from 0.7 to 1.2. To remove the zoom but keep the text animation, set ZOOM_FROM to 1. Ease is set with ease: "power2.out" in each gsap.fromTo call.

Removing GSAP animations

  1. Hero slider script: open Page settings for Home, go to Custom code and remove the HeroSliderAnimation script, then save.
  2. One native interaction: open the Interactions panel, find the interaction by its name in the element map above and delete it. To keep it on desktop only, open its settings and turn it off for the Tablet and Mobile breakpoints instead.
  3. All motion: remove the hero script and delete every interaction in the element map. Webflow stops loading GSAP, ScrollTrigger and SplitText on its own once no interaction needs them, so there is no library to remove by hand.
  4. Publish the site.

Side effect: without the hero script, the hero card, text and background appear instantly and the slider keeps working, including Cross Fade between slides. Without an interaction, its elements simply show in their normal styled state.