Introductory guide

How to edit GSAP animations

• GSAP + ScrollTrigger – the animation engine. Webflow loads it for you through Settings panel → GSAP integration; there is no GSAP script tag in the custom code. The sticky header script uses gsap.to() and ScrollTrigger.create().
• Lenis 1.3.17 – smooth scrolling. The library and its CSS load from unpkg in Site settings Head code and start in Footer code.
• Interactions with GSAP – 21 visual interactions (hero reveal, scroll reveals, hovers, custom cursor, marquee, mobile menu, FAQ). These are built in the Interactions panel, not in code.

Where the code lives

1. Open the site dashboard and go to Site settings → Custom code.
2. Head code holds the Lenis library: the block marked <!-- LENIS SMOOTH SCROLL --> with lenis.min.js and lenis.css.
3. Footer code holds two scripts: <!-- LENIS SMOOTH SCROLL --> (starts Lenis) and <!-- HEADER STICKY --> (hides and shows the header).
4. No page has its own animation code in Page settings, and no Embed element contains animation scripts.
5. After editing, click Save changes, then publish. Custom code does not run on the Designer canvas, so test on the published site.

GSAP element map

Custom code animations

• Header hide/show – .header-section (Header Section component, site header on every page). Moves the header up 175px (y: -175, 0.3s) when you scroll down more than 100px, and back to y: 0 (0.15s) when you scroll up, with ease: 'power2.out'. It also removes the header border on load. Trigger: scroll direction, via ScrollTrigger.create() with start: 0, end: 'max'. Edit in Footer code → HEADER STICKY.
• Header overlay – .header-over. Starts at opacity 0 and fades to 1 (0.3s) as soon as the page scrolls, then fades back out at the top of the page. Edit in Footer code → HEADER STICKY.
• Header spacing – .header-gap. Spacer heights shrink to 0 (0.3s) once the page scrolls and return to their original height at the top of the page. Edit in Footer code → HEADER STICKY.
• Smooth scroll – no selector (whole page). Replaces native scrolling with smooth, eased scrolling (duration: 1.2) and sends each scroll update to ScrollTrigger. Trigger: mouse wheel or trackpad scroll. Edit in Footer code → LENIS SMOOTH SCROLL (library in Head code).

Interactions with GSAP (Interactions panel)

• Hero Animation – Page load. [hero-animation] fades in and rises from 75px below. 0.6s, stagger 0.2s.
• Text Animation – Scroll into view (start top bottom) of [text-animation]. Fades in and rises from 75px below. 0.8s, starts at 0.2s, stagger 0.2s.
• Card Animation – Scroll into view (start top bottom) of [card-animation]. Fades in and scales up from 0.75. 0.8s, starts at 0.2s, stagger 0.2s.
• Grow Animation – Scroll into view (start top bottom) of [grow-animation]. Fades in and scales from 0.75 to 1. 0.8s, starts at 0.2s, stagger 0.2s.
• Header Navigation – Click .header-humb (play / reverse). .top and .bottom lines move ±6px and rotate ±45° to form an X (0.4s); .middle line changes width (0.2s).
• Header Dropdown – Hover .header-dropdown (reverses on mouse leave). .header-icon rotates 0° to 180° (0.5s); .header-wrapp opens from 0 to auto height (0.3s).
• Button Hover – Hover .button (reverses on mouse leave). .button-bg shrinks to scale 0.9 × 0.8; .button-line scales to 1 and fades in. 0.3s.
• Finvelle Card – Hover .finvelle-card (reverses on mouse leave). .finvelle-ico switches background and icon color; .finvelle-gap collapses to 0 height; .finvelle-demo opens to auto height. 0.3s.
• CMS Animation – Hover .cms-card (reverses on mouse leave). .cms-image zooms to 1.2. 0.5s.
• Team Hoverable – Hover .team-card (reverses on mouse leave). .team-overlay width shrinks to 0%. 0.5s.
• Review Expand – Hover .review-card. Removes the is-active combo class from every .review-card, .review-quote and .review-icon, then adds it to the hovered card, its quote and its icon. Instant class toggle.
• FAQ – Click [faq] (on .faq-card). Adds the is-active combo class to the clicked card and its [faq-icon], and removes it from the other cards. Instant class toggle.
• Logo Loop – Page load. [any-loop] scrolls left (x to -100%). 90s, repeats forever.
• Video Hover – Hover [video-button] (reverses on mouse leave). [pause-icon] fades in and scales from 0.5 to 1. 0.3s, desktop only.
• Curson Color – Hover [cursor-hover] (reverses on mouse leave). The hovered element's background, text and border colors switch to a color variable. Instant.

Customize animation values

1. Header Sticky: duration, delay and ease

if (currentScroll > lastScroll && currentScroll > 100) {
  //scrolling down → hide header
  gsap.to(header, {
    y: -100,
  });
} else {
  //scrolling up → show header
  gsap.to(header, {
    y: 0,
  });
}

gsap.to(header, {
  y: -100,
  duration: 0.8,      // seconds; default 0.5
  delay: 0.1,         // wait before moving; default 0
  ease: "power2.out", // speed curve; default "power1.out"
});

• duration: higher is slower. To make the header hide more slowly, increase it from the default 0.5 to 0.8.
• delay: seconds to wait before the header moves. Keep it small (0 to 0.2) so the header still reacts to scrolling.
• ease: the speed curve. "power2.out" starts fast and settles gently; "none" moves at a constant speed. Preview options in the GSAP Ease Visualizer linked below.
• Add the same three lines to the second gsap.to(header, { y: 0 }) call so hiding and showing match.

2. Header Sticky: distance and scroll threshold

• y: -100 moves the header up 100px. If your header is taller than 100px, increase it, for example y: -140, so it hides fully. Keep y: 0 for the show tween.
• currentScroll > 100 keeps the header visible for the first 100px of scrolling. Change 100 to 300 to keep it visible longer.
• start: 0 and end: 'max' make ScrollTrigger watch the whole page. Leave these unchanged.

3. Lenis smooth scroll: duration and easing

const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  smooth: true,
});

• duration: seconds each scroll takes to settle. Lower it to 0.8 for snappier scrolling, or raise it to 1.6 for a floatier feel.
• easing: the scroll speed curve. The original is an exponential ease-out (fast start, gentle stop).

const lenis = new Lenis({
  duration: 0.8,
  easing: (t) => t,
  smooth: true,
});

4. Interactions with GSAP: duration, delay, ease, stagger and scroll start

1. In the Designer, open the Interactions panel. Make sure the dropdown at the bottom of the panel is set to Interactions with GSAP.
2. Select the interaction by its name from the element map, for example Text Animation.
3. Click the action on the timeline to edit Duration, Delay (or drag the action along the timeline), Ease and Stagger, plus the animated values such as Move Y, Scale or Opacity.
4. For scroll interactions, select the trigger to edit Start and End (for example top bottom) and Scrub.
5. Use the preview button in the panel to check the result.

Remove GSAP animations

A. Remove the sticky header effect

1. Go to Site settings → Custom code → Footer code.
2. Delete everything from <!-- HEADER STICKY --> down to its closing </script> tag.
3. Keep the <!-- LENIS SMOOTH SCROLL --> block above it.
4. Nothing else needs to change: the header uses no custom attributes or extra classes for this effect, and its layout comes from the .header-section class.
5. Click Save changes and publish. The header now stays in place instead of hiding on scroll down.

B. Remove Lenis smooth scrolling

1. In Footer code, delete everything from <!-- LENIS SMOOTH SCROLL --> down to its closing </script> tag.
2. In Head code, delete the <!-- LENIS SMOOTH SCROLL --> comment, the lenis.min.js script tag and the lenis.css link tag.
3. Remove both parts together. If you delete only the Head code library, the Footer script throws a “Lenis is not defined” error in the browser console.
4. Click Save changes and publish. The page returns to native browser scrolling, and the sticky header keeps working because it only needs GSAP and ScrollTrigger.

C. Remove all custom code animations

1. Complete steps A and B.
2. Leave Settings panel → GSAP integration unchanged unless you are sure no other custom code on your site uses GSAP. Interactions with GSAP are built separately in the Interactions panel and are covered in step D.

D. Remove an interaction with GSAP

1. Open the Interactions panel (set to Interactions with GSAP) and select the interaction by name.
2. To pause it without deleting, click the eye icon next to an action to hide it. To remove it, delete the interaction.
3. For attribute-based interactions, you can also remove the attribute (for example text-animation) from elements in Element settings → Custom attributes. Leaving it in place is harmless.
4. The reveal interactions (Hero, Text, Card, Title) set their own start state, so after deleting them the elements simply appear in their final position.
5. Interactions apply site-wide, so a change affects every page that uses the same class or attribute.

After any removal, check

• Preview all the pages and scroll from top to bottom.
• Open the mobile menu, hover buttons and cards.
• Publish the site once everything works.

GSAP & animation documentation