Instructions

How to edit gsa[p 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

Interactions with gsap (Interactions panel)

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, Stories Title) set their own start state, so after deleting them the elements simply appear in their final position.
5. The custom cursor uses six interactions together: Cursor Circle, Cursor Dot, Cursor Show/Hide, Curson Color, View Show/Hide and Click Show/Hide. To remove the cursor, delete all six, delete the Click and Circle actions inside Button Hover, then remove the Cursor Section component from each page.
6. Interactions apply site-wide, so a change affects every page that uses the same class or attribute.

After any removal, check

• Preview the Home, About and Contact pages and scroll from top to bottom.
• Open the mobile menu, hover buttons and cards, and open an FAQ item.
• Open the browser console on the published site and confirm there are no red errors.
• Publish the site once everything works.

GSAP & animation documentation