Instructions

Disclaimer Element Map Customizing Key Variables Removing GSAP Animations

Disclaimer

Welcome to the GSAP animation guide for this template. This page will help you understand, customize, or remove GSAP animations used throughout the site.

Element Map

Below is a list of all elements animated with GSAP and what each animation does:

Selector

Description

.section-heading

Scrambles each character on scroll into view.

.banner-heading

Same effect as above, but applied to large banner titles.

.detail-page-heading

Character scrambling animation triggered on scroll.

.char (auto-generated)

These are the individual characters split by SplitType and animated one-by-one.

Customizing Key Variables

All animations are controlled via GSAP and ScrollTrigger. Below is the core snippet with explanations

const characters = "|{}[]<>!@#$%^&*";

function scrambleWithGSAP(charElement, finalChar) {
  const scrambleSteps = Array.from({ length: 5 }, () =>
    characters[Math.floor(Math.random() * characters.length)]
  );
  scrambleSteps.push(finalChar);

  const tl = gsap.timeline();
  scrambleSteps.forEach((step) => {
    tl.to(charElement, {
      text: step,
      duration: 0.05, // 🔧 Change this to control speed
      ease: "none"    // 🔧 Change easing here (e.g., "power2.out")
    });
  });
}

✅ Common Customizations:

Variable

How to Change

duration: 0.05

Increase for slower scrambling, e.g., 0.1

ease: "none"

Change easing style, e.g., "power2.out"

characters = ""

{}[]<>!@#$%^&*

start: "top 90%"

Adjust when animation starts. Higher % = sooner trigger

end: "bottom 15%"

Adjust scroll range where animation is active

ScrollTrigger example:

ScrollTrigger.create({
  trigger: heading,
  start: "top 90%", // 🔧 Change when animation starts
  end: "bottom 15%", // 🔧 Change when animation ends
  onEnter: () => {
    // animation code
  }
});

Removing GSAP Animations

If you'd like to disable or fully remove the GSAP animations:

Step-by-step Instructions:

Open your custom code section in Webflow where the script is added (Site Settings → Custom → Code Before </body> tag).

Comment out or delete the GSAP block.

<!-- 
<script>
  window.Webflow ||= [];
  window.Webflow.push(function () {
    // Entire GSAP code here
  });
</script>
-->

Alternatively, remove just the ScrollTrigger inside the script.

// Comment or remove this block
ScrollTrigger.create({ ... });

Save and Republish the site.

⚠️ Visual Side Effects:

Animated headings will now appear instantly without any scrambling or transition effects.
Layout will remain fully functional.

GSAP Guide