Instruction

Guide for Fluke Webflow Template

GSAP Guide
Every GSAP code used on this template is here. How to edit them and find them is explain on this page. In every code block on this page, we added additional explanation to help you understand everything.

You can find the code in (Site settings) Footer Code.
Lenis Smooth Scroll
<script src="https://unpkg.com/lenis@1.3.1/dist/lenis.min.js"></script> 

 

<script>

// lenis smooth scroll
  
{
  let lenis;

  const initScroll = () => {
    lenis = new Lenis({});
    lenis.on("scroll", ScrollTrigger.update);
    gsap.ticker.add((time) => lenis.raf(time * 1000));
    gsap.ticker.lagSmoothing(0);
  };

  function initGsapGlobal() {
    
    // Do everything that needs to happen
    //  before triggering all
    // the gsap animations 

    initScroll();

    // match reduced motion media
    // const media = gsap.matchMedia();

    // Send a custom
    //  event to all your
    // gsap animations
    // to start them 

    const sendGsapEvent = () => {
      window.dispatchEvent(
        new CustomEvent("GSAPReady", {
          detail: {
            lenis,
          },
        })
      );
    };

    // Check if fonts are already loaded
    
    if (document.fonts.status === "loaded") {
      sendGsapEvent();
    } else {
      document.fonts.ready.then(() => {
        sendGsapEvent();
      });
    }

    // We need specific handling because the
    // grid/list changes the scroll height of the whole container
    //

    let resizeTimeout;
    const onResize = () => {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(() => {
        ScrollTrigger.refresh();
      }, 50);
    };

    window.addEventListener("resize", () => onResize());
    const resizeObserver = new ResizeObserver((entries) => onResize());
    resizeObserver.observe(document.body);

    queueMicrotask(() => {
      gsap.to("[data-start='hidden']", {
        autoAlpha: 1,
        duration: 0.1,
        delay: 0.2,
      });
    });
  }

  // this only for dev
  
  const documentReady =
    document.readyState === "complete" || document.readyState === "interactive";

  if (documentReady) {
    initGsapGlobal();
  } else {
    addEventListener("DOMContentLoaded", (event) => initGsapGlobal());
  }
}

</script>
Lenis Smooth Scroll is a lightweight JavaScript library that enables buttery-smooth, hardware-accelerated scrolling for websites. It works by intercepting the browser’s native scroll behavior and applying eased, customizable motion, creating a more fluid and refined browsing experience. Lenis supports vertical and horizontal scroll, inertia effects, and syncs seamlessly with animations from libraries like GSAP or ScrollTrigger.
Project Card Entrance GSAP Animation
GSAP animation of Project Card Entrance and Out
<script>
  // Project Card Entrance
  gsap.registerPlugin(ScrollTrigger);

  // Create a timeline for the cards
  let cardsTl = gsap.timeline({
    scrollTrigger: {
      trigger: ".project-card-wrap",
      start: "top 50%",           // enter at 50% viewport
      end: "bottom 50%",          // end when leaving at 50%
      toggleActions: "play reverse play reverse", 
      // play on enter, reverse on leave
    }
  });

  cardsTl.from(".project-card", {
    y: 50,
    opacity: 0,
    duration: 0.8,
    ease: "power3.out",
    stagger: {
      each: 0.2,
      from: "random"
    }
  });
  // END Project Card Entrance
  
</script>
Team Draggable GSAP Animation
GSAP Animation for team draggable interaction
<script>
  
  // Team Draggable  
gsap.registerPlugin(Draggable);

const gallery = document.querySelector(".team-gallery-slide");

Draggable.create(gallery, {
  type: "x",
  bounds: ".team-gallery", // container element
  inertia: true
});
// END Team Draggable
</script>