This template uses Webflow’s Variables feature, making it easy to update colors site-wide.To change a color:

Open the Variables panel.

Select the color variable you want to modify.

Make your changes, and they will automatically apply throughout the site.

To update fonts:

Go to Site Settings > Fonts.

You can upload custom fonts or choose from Google Fonts to match your brand style.

To edit animations:

Open the Navigator panel.

Select the section that contains the animation.

Go to the Interactions tab to modify or replace the animation as needed.

Nav Link item and Footer Widget item also use GSAP hover Intersection

Note: Some elements may be set to visibility: hidden, display: none, or opacity: 0. To edit these, simply change their visibility in the Style panel to reveal them.

Every GSAP script used in this template is listed on this page. You’ll also find instructions on how to locate and edit each one. In every code block, we’ve added extra explanations to help you understand exactly how everything works.

You can find the code in (Site settings) Footer Code.

<script src="https://unpkg.com/lenis@1.3.1/dist/lenis.min.js"></script> 

 

<script>

  // Create a smooth scrolling instance
  const smoothScroll = new Lenis({
    duration: 1.4,
    smooth: true,
    easing: (value) => {
      return 1 - Math.pow(2, -10 * value);
    }
  });

  // Keep ScrollTrigger synced with Lenis
  smoothScroll.on('scroll', () => {
    ScrollTrigger.update();
  });

  // Drive Lenis using the GSAP ticker
  gsap.ticker.add((t) => {
    smoothScroll.raf(t * 1000);
  });

  // Disable lag smoothing for consistent timing
  gsap.ticker.lagSmoothing(0);



</script>

Need help? We’re here for you!
Contact us through Webflow Support and we’ll respond promptly to assist with your questions.