Instruction

Webflow Template User Guide

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.
Pre-Load Home V1 with Script code GSAP
<script>
document.addEventListener("DOMContentLoaded", () => {

  // Step 1 — set fixed with all sides 0%
  gsap.set(".web-content", {
    position: "fixed",
    top: "0%",
    left: "0%",
    right: "0%",
    bottom: "0%"
  });

  // Step 2 — after delay switch to static
  gsap.to(".web-content", {
    delay: 3.5,
    duration: 0.01, // required so onComplete always fires
    onComplete() {
      gsap.set(".web-content", {
        position: "relative",
        top: "auto",
        left: "auto",
        right: "auto",
        bottom: "auto"
      });
    }
  });

});
</script>

<script>
document.addEventListener("DOMContentLoaded", () => {

  const target = ".main-section.version-1.separator";

  // Step 1 — fix position + hide layout
  gsap.set(target, {
    display: "none"
  });

  // Step 2 — after delay, show + switch to flex layout
  gsap.to(target, {
    delay: 3.5,
    duration: 0.01,
    onComplete() {
      gsap.set(target, {
         display: "flex"
      });
    }
  });

});
</script>