Skip to content

scrollTrigger don't work for Pepsi and Coca Cola #1

Open
Open
scrollTrigger don't work for Pepsi and Coca Cola#1

Description

@aridepai17
aridepai17
opened on Jul 4, 2025

DESCRIPTION

  • In the deployed website, the scrollTrigger of Pepsi and Coca Cola cans do not work. Only the Fanta is moving based off of scrollTrigger.

ROOT CAUSE

  • Some of the main issue is - the CocaCola can is not even loaded into the website, the position of the Pepsi can is not ideal. The 'coconutleaf.png' has a typo in index.html

SOLUTION

  • Fix the typo in index.html: 'coconoutleaf.png' to 'coconutleaf.png'
  • The following solution uses scrollTrigger for fruit animations and GSAP timelines.
    Alternate fix for the not working of Pepsi and Coca cans can be -
//script.js
// Register ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);

// Set initial positions for all animated elements
gsap.set("#fanta", { top: "50%", left: "50%", xPercent: -50, yPercent: -50 });
gsap.set("#orange-cut", { top: "55%", right: "30%", scale: 0.55 });
gsap.set("#orange", { top: "50%", right: "20%", width: "25%" });
gsap.set("#leaf", { top: "10%", left: "0%", rotation: 60 });
gsap.set("#leaf2", { top: "70%", left: "80%", rotation: -90 });
gsap.set("#leaf3", { top: "10%", right: "0%" });

// Set initial positions for product cards
gsap.set(".lemon1", { x: -300, y: 0, rotation: -90, opacity: 0 });
gsap.set("#cocacola", { x: -300, y: 100, rotation: -90, opacity: 0 });
gsap.set(".lemon2", { x: 300, y: 0, rotation: 90, opacity: 0 });
gsap.set("#pepsi", { x: 300, y: 100, rotation: 90, opacity: 0 });

// Timeline 1: Animate elements when scrolling to section two
let tl1 = gsap.timeline({
  scrollTrigger: {
    trigger: ".two",
    start: "top 80%",
    end: "bottom 20%",
    scrub: 1,
    // markers: true, // Uncomment for debugging
  },
});

tl1
  .to(
    "#fanta",
    {
      top: "120%",
      left: "0%",
      xPercent: 0,
      yPercent: 0,
      duration: 1,
    },
    "moveElements"
  )
  .to(
    "#orange-cut",
    {
      top: "160%",
      left: "23%",
      right: "auto",
      duration: 1,
      scale: 1.25,
    },
    "moveElements"
  )
  .to(
    "#orange",
    {
      width: "15%",
      top: "160%",
      right: "10%",
      duration: 1,
    },
    "moveElements"
  )
  .to(
    "#leaf",
    {
      top: "110%",
      left: "70%",
      rotation: 130,
      duration: 1,
    },
    "moveElements"
  )
  .to(
    "#leaf2",
    {
      top: "110%",
      left: "0%",
      rotation: 130,
      duration: 1,
    },
    "moveElements"
  );

// Timeline 2: Animate product cards when scrolling to section three
let tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: ".three",
    start: "top 85%",
    end: "center 50%",
    scrub: 1,
    // markers: true, // Uncomment for debugging
  },
});

tl2
  .to(
    ".lemon1",
    {
      x: 0,
      y: 0,
      rotation: 0,
      opacity: 1,
      duration: 1,
    },
    "showCards"
  )
  .to(
    "#cocacola",
    {
      x: 0,
      y: 0,
      rotation: 0,
      opacity: 1,
      duration: 1,
    },
    "showCards"
  )
  .to(
    ".lemon2",
    {
      x: 0,
      y: 0,
      rotation: 0,
      opacity: 1,
      duration: 1,
    },
    "showCards"
  )
  .to(
    "#pepsi",
    {
      x: 0,
      y: 0,
      rotation: 0,
      opacity: 1,
      duration: 1,
    },
    "showCards"
  )
  .to(
    "#orange-cut",
    {
      width: "18%",
      left: "42%",
      top: "204%",
      duration: 1,
    },
    "showCards"
  )
  .to(
    "#fanta",
    {
      width: "35%",
      top: "210%",
      left: "33%",
      duration: 1,
    },
    "showCards"
  );

// Timeline 3: Add some hover effects for cards
document.querySelectorAll(".card").forEach((card) => {
  card.addEventListener("mouseenter", () => {
    gsap.to(card, { scale: 1.05, duration: 0.3, ease: "power2.out" });
  });

  card.addEventListener("mouseleave", () => {
    gsap.to(card, { scale: 1, duration: 0.3, ease: "power2.out" });
  });
});

// Additional smooth scroll behavior
ScrollTrigger.refresh();

// Debug function - uncomment to check if elements exist
/*
function checkElements() {
  const elements = ['#fanta', '#orange-cut', '#orange', '#leaf', '#leaf2', '#leaf3', 
                   '.lemon1', '#cocacola', '.lemon2', '#pepsi', '.two', '.three'];
  
  elements.forEach(el => {
    const element = document.querySelector(el);
    console.log(`${el}: ${element ? 'Found' : 'Not found'}`);
  });
}

// Call this function to debug
// checkElements();
*/

// style.css
@font-face {
  font-family: 'Product Sans';
  src: url(fonts/ProductSansRegular.ttf);
}

@font-face {
  font-family: 'Product Sans B';
  src: url(fonts/ProductSansBold.ttf);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Product Sans';
}

html,
body {
  height: 100%;
  width: 100%;
}

body::-webkit-scrollbar {
  display: none;
}

#main {
  width: 100%;
  height: 200vh;
  background-color: orangered;
}

nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 10vh;
  padding: 0vw 10vw;
  z-index: 99;
}

nav a,
i {
  font-size: 1vw;
  text-decoration: none;
  color: #fff;
}

.center-nav {
  display: flex;
  gap: 3vw;
}

nav i {
  font-size: 1.5vw;
}

.one {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: linear-gradient(150deg, rgb(255, 166, 0), rgb(255, 166, 0), rgb(255, 94, 0))
}

.one h1 {
  font-size: 25vw;
  font-family: 'Product Sans';
  color: #fff;
}

#fanta {
  position: absolute;
  width: 40%;
  z-index: 4;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#orange-cut {
  position: absolute;
  width: 20%;
  transform: scale(1.25);
  z-index: 3;
  top: 55%;
  right: 30%;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#leaf {
  top: 10%;
  left: 0%;
  transform: rotate(60deg);
  position: absolute;
  width: 18%;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#leaf2 {
  top: 70%;
  left: 80%;
  transform: rotate(-90deg);
  position: absolute;
  width: 12%;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#leaf3 {
  position: absolute;
  width: 20%;
  top: 10%;
  right: 0%;
}

.two {
  display: flex;
  width: 100%;
  height: 100vh;
  background: #4d231c;
}

.left-two,
.right-two {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 5vh;
  width: 50%;
  height: 100%;
}

.left-two svg {
  margin-top: 50vh;
  width: 90%;
  transform: rotateX(50deg);
}

.right-two h1 {
  color: #fff;
  font-size: 5vw;
}

.right-two p {
  font-size: 1vw;
  color: #fff;
  width: 80%;
}

.three {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5vw;
  width: 100%;
  height: 100vh;
  background: linear-gradient(150deg, rgb(255, 166, 0), rgb(255, 94, 0));
}

.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2vh;
  width: 25vw;
  height: 70vh;
  margin-top: 10vh;
  border-radius: 20px;
  background-color: #fff;
}

.card h1 {
  margin-top: 40vh;
  font-size: 3vw;
}

.card button {
  font-size: 1vw;
  border-radius: 50px;
  border: none;
  color: #fff;
  background-color: rgb(255, 149, 0);
  padding: 1vw 2vw;
}

#cocacola {
  top: -15%;
  position: absolute;
  width: 57%;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 0%);
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#pepsi {
  top: -20%;
  position: absolute;
  width: 85%;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 0%);
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

.lemon {
  top: -30%;
  position: absolute;
  left: -1%;
  right: 50%;
  width: 25vw;
  transform: scale(1.1);
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#orange {
  transform: scale(1.2);
}

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Fanta</title>
  </head>
  <body>
    <div id="main">
      <nav>
        <a href="#">Logo</a>
        <div class="center-nav">
          <a href="#">Home</a>
          <a href="#">Products</a>
          <a href="#">Shop</a>
          <a href="#">Contact</a>
        </div>
        <i class="ri-menu-fill"></i>
      </nav>
      <div class="one">
        <h1>FANTA</h1>
        <img id="orange-cut" src="assets/orange2.png" alt="" />
        <img id="fanta" src="assets/fanta.png" alt="" />
        <img id="orange" src="assets/orange.webp" alt="" />
        <img id="leaf" src="assets/leaf.webp" alt="" />
        <img id="leaf2" src="assets/leaf2.png" alt="" />
        <img id="leaf3" src="assets/coconutleaf.png" alt="" />
      </div>
      <div class="two">
        <div class="left-two">
          <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
            <path
              fill="#e04428"
              d="M41.5,-59.5C49.8,-51.1,49.7,-33.6,50.7,-19.2C51.7,-4.7,53.8,6.7,52.4,18.9C51.1,31.1,46.3,44.1,36.9,52.9C27.6,61.8,13.8,66.5,-2.5,70C-18.8,73.4,-37.7,75.6,-52.5,68.5C-67.3,61.5,-78.2,45.2,-84.5,27.1C-90.9,9,-92.7,-10.8,-80.5,-19.3C-68.3,-27.8,-42.1,-24.8,-26.3,-30.8C-10.6,-36.8,-5.3,-51.7,5.7,-59.5C16.6,-67.3,33.2,-68,41.5,-59.5Z"
              transform="translate(100 100)"
            />
          </svg>
        </div>
        <div class="right-two">
          <h1>Flavour Updated</h1>
          <p>
            Get ready ot experience Fanta like never before - a bold, juicy burst that
            wakes up your senses and refreshes your world. It's not just a drink; it's a vibe.
            More zest, more fun, more Fanta.
          </p>
        </div>
      </div>
      <div class="three">
        <div class="card">
          <img class="lemon lemon1" src="assets/lemon.webp" alt="" />
          <img id="cocacola" src="assets/cocacola.png" alt="" />
          <h1>Coca Cola</h1>
          <button>Buy Now</button>
        </div>

        <div class="card">
          <h1>Fanta</h1>
          <button>Buy Now</button>
        </div>

        <div class="card">
          <img class="lemon lemon2" src="assets/lemon.webp" alt="" />
          <img id="pepsi" src="assets/pepsi.png" alt="" />
          <h1>Pepsi</h1>
          <button>Buy Now</button>
        </div>
      </div>
    </div>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
      integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"
      integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="script.js"></script>
  </body>
</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions