copy code from my videos

My goal is to help people make cool and fully functional websites with GSAP without needing the coding skills.

Simply Copy and Paste Any Code

Start Here

STEP 1: Activate GSAP On Your Website

Copy and paste the below code snippet into a html widget inside your website header. It’s as simple as that, you’re good to go.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/Flip.min.js"></script>

Code

Scroll Trigger Overlap

Have each section of your webpage overlap the last one in a continuous scroll effect. Make sure you copy and paste the code into your on page html widget and give everything you want the effect on the CSS Class of ‘section’

<script>
document.addEventListener('DOMContentLoaded', function() {
    gsap.registerPlugin(ScrollTrigger);

    gsap.utils.toArray('.section').forEach((section) => {
        gsap.to(section, {
            scrollTrigger: {
                trigger: section,
                start: "top top",
                end: "bottom top",
                pin: true,
                pinSpacing: false,
                scrub: true
            }
        });
    });
});
</script>

Code: Top Code is your general script & bottom code is your counter widget

Colours: #115A72 #DBFFFC

CSS CLASSES: .Shuffle-button .Testimonials-container .testimonial-box

Random Product Shuffle

Create a page where customers can tap a button and get given a random product. Simply follow the video along and copy the code and CSS classes from here.

<script>
document.addEventListener("DOMContentLoaded", () => {
  const button = document.querySelector(".shuffle-button");
  const container = document.querySelector(".testimonials-container");
  const items = Array.from(document.querySelectorAll(".testimonial-box"));

  let previousIndexes = items.map((_, index) => index);
  let clickCounter = 0;

  const counterDisplay = document.getElementById('counter-display');

  const overlayImages = [
    "http://gsap-grounds.local/wp-content/uploads/2025/02/Blue-Cheesecake-1.png",
    "http://gsap-grounds.local/wp-content/uploads/2025/02/red-velvet-1.png",
    "http://gsap-grounds.local/wp-content/uploads/2025/02/strawberry-1.png"
  ];

  // Create overlay container (background)
  const overlayContainer = document.createElement("div");
  overlayContainer.style.position = "fixed";
  overlayContainer.style.top = "0";
  overlayContainer.style.left = "0";
  overlayContainer.style.width = "100vw";
  overlayContainer.style.height = "100vh";
  overlayContainer.style.background = "rgba(0, 0, 0, 0.5)"; // Semi-transparent background
  overlayContainer.style.display = "none"; // Hidden by default
  overlayContainer.style.justifyContent = "center";
  overlayContainer.style.alignItems = "center";
  overlayContainer.style.zIndex = "9999";
  overlayContainer.style.flexDirection = "column"; // Stack elements vertically

  // Create image wrapper for positioning
  const imageWrapper = document.createElement("div");
  imageWrapper.style.position = "relative";
  imageWrapper.style.display = "inline-block"; 

  // Create 'Order Now' button
  const orderButton = document.createElement("button");
  orderButton.textContent = "Order Now";
  orderButton.style.position = "absolute";
  orderButton.style.top = "50%";
  orderButton.style.left = "50%";
  orderButton.style.transform = "translate(-50%, -50%)";
  orderButton.style.background = "#f32c74"; // Bright color
  orderButton.style.color = "white";
  orderButton.style.border = "none";
  orderButton.style.padding = "12px 24px";
  orderButton.style.fontSize = "20px";
  orderButton.style.fontWeight = "bold";
  orderButton.style.borderRadius = "8px";
  orderButton.style.cursor = "pointer";
  orderButton.style.boxShadow = "0px 4px 10px rgba(0,0,0,0.3)";
  orderButton.style.zIndex = "10000"; 

  // Add button functionality (redirect to order page)
  orderButton.addEventListener("click", () => {
    window.location.href = "#"; // Change to your actual order page URL
  });

  // Create pop-up image
  const overlayImage = document.createElement("img");
  overlayImage.style.maxWidth = "90%"; // Responsive width
  overlayImage.style.maxHeight = "80vh"; // Fit within viewport
  overlayImage.style.borderRadius = "15px"; // Rounded corners
  overlayImage.style.boxShadow = "0px 4px 10px rgba(0,0,0,0.3)"; // Soft shadow
  overlayImage.style.transition = "transform 0.3s ease"; // Smooth opening effect
  overlayImage.style.display = "block";

  // Create close button (X)
  const closeButton = document.createElement("button");
  closeButton.innerHTML = "×"; // "×" symbol
  closeButton.style.position = "absolute";
  closeButton.style.top = "10px";
  closeButton.style.right = "10px";
  closeButton.style.width = "30px";
  closeButton.style.height = "30px";
  closeButton.style.background = "rgba(0, 0, 0, 0.7)";
  closeButton.style.color = "white";
  closeButton.style.border = "none";
  closeButton.style.borderRadius = "50%";
  closeButton.style.fontSize = "20px";
  closeButton.style.fontWeight = "bold";
  closeButton.style.cursor = "pointer";
  closeButton.style.display = "flex";
  closeButton.style.alignItems = "center";
  closeButton.style.justifyContent = "center";
  closeButton.style.zIndex = "10001";

  // Append elements
  imageWrapper.appendChild(overlayImage);
  imageWrapper.appendChild(orderButton);
  imageWrapper.appendChild(closeButton); // Add close button
  overlayContainer.appendChild(imageWrapper);
  document.body.appendChild(overlayContainer);

  button.addEventListener("click", () => {
    clickCounter++;
    counterDisplay.textContent = ` ${clickCounter}`;

    if (clickCounter === 10) {
      const randomImage = overlayImages[Math.floor(Math.random() * overlayImages.length)];
      overlayImage.src = randomImage;

      overlayContainer.style.display = "flex";
      gsap.fromTo(overlayImage, { scale: 0.8, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.3, ease: "power2.out" });
    }

    const state = Flip.getState(items);
    let newIndexes;
    do {
      newIndexes = [...previousIndexes];
      for (let i = newIndexes.length - 1; i > 0; i--) {
        const randomIndex = Math.floor(Math.random() * (i + 1));
        [newIndexes[i], newIndexes[randomIndex]] = [newIndexes[randomIndex], newIndexes[i]];
      }
    } while (newIndexes.some((newIndex, i) => newIndex === previousIndexes[i]));

    const newOrder = newIndexes.map((newIndex) => items[newIndex]);
    container.append(...newOrder);

    Flip.from(state, {
      duration: 0.2,
      ease: "circ.inOut",
    });

    previousIndexes = newIndexes;
  });

  // Close popup when clicking the X button
  closeButton.addEventListener("click", closePopup);

  // Close popup on Escape key press
  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape" && overlayContainer.style.display === "flex") {
      closePopup();
    }
  });

  function closePopup() {
    gsap.to(overlayImage, { scale: 0.8, opacity: 0, duration: 0.2, ease: "power2.in", onComplete: () => {
      overlayContainer.style.display = "none";
    }});
  }
});
</script>

<div id="counter-display" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -125%); font-family: 'Inter', sans-serif; font-size: 200px; font-weight: 600; background-color: #f32c74; color: white; padding: 10px 80px; border-radius: 35px;">
  0
</div>

Criss Cross Scroll Trigger

Create a stylish full-width text scroll trigger for your website. Simply copy and paste the code below into a html widget on your page and use the CSS Classes provided.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    gsap.registerPlugin(ScrollTrigger);

    gsap.to(".scrolling-text", {
      x: "-20%", // Right to left
      scrollTrigger: {
        trigger: ".scrolling-text-container",
        start: "top bottom",
        end: "bottom top",
        scrub: 1
      }
    });

    gsap.to(".scrolling-text2", {
      x: "50%", // Left to right
      scrollTrigger: {
        trigger: ".scrolling-text-container2",
        start: "top bottom", 
        end: "bottom top",
        scrub: 1
      }
    });
  });
</script>

<style>
  .scrolling-text-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    display: flex;
  }
  .scrolling-text {
    display: inline-block;
    min-width: 100%;
  }

  .scrolling-text-container2 {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    display: flex;
  }
  .scrolling-text2 {
    display: inline-block;
    min-width: 100%;
  }
</style>

CSS CLASSES:
.scrolling-text-container
.scrolling-text
.scrolling-text2

I'll Build You A Website

Thanks for stopping by. In the meantime while I’m creating more content, if you’d like a website designed for you, feel free to get in contact below and let’s discuss some of your ideas! I will respond within 72 hours.