Cannot see my complete page on website until I open Console

Question

function init() {
  gsap.registerPlugin(ScrollTrigger);

  // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll

  const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".main"),
    smooth: true,
  });
  // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
  locoScroll.on("scroll", ScrollTrigger.update);

  // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things
  ScrollTrigger.scrollerProxy(".main", {
    scrollTop(value) {
      return arguments.length
        ? locoScroll.scrollTo(value, 0, 0)
        : locoScroll.scroll.instance.scroll.y;
    }, // we don't have to define a scrollLeft because we're only scrolling vertically.
    getBoundingClientRect() {
      return {
        top: 0,
        left: 0,
        width: window.innerWidth,
        height: window.innerHeight,
      };
    },
    // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
    pinType: document.querySelector(".main").style.transform
      ? "transform"
      : "fixed",
  });

  // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
  ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

  // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
  ScrollTrigger.refresh();
}

init();

var crsr = document.querySelector(".cursor");
var main = document.querySelector(".main");
main.addEventListener("mousemove", (dets) => {
  crsr.style.left = dets.clientX + "px";
  crsr.style.top = dets.clientY + "px";
});

var tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".page1 h1",
    scroller: ".main",
    // markers: true,
    start: "top 27%",
    end: "top -50%",
    scrub: 2,
  },
});

tl.to(
  ".page1 h1",
  {
    x: -100,
    //   duration: 1,
  },
  "anim"
);

tl.to(
  ".page1 h2",
  {
    x: 80,
  },
  "anim"
);

tl.to(
  ".page1 video",
  {
    width: "100%",
  },
  "anim"
);
var tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: ".page1 h1",
    scroller: ".main",
    start: "top -50%",
    end: "top -100%",
    scrub: 2,
    // markers: true,
  },
});
tl2.to(".main", {
  backgroundColor: "#fff",
});

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  color: #fff;
  overflow-x: hidden;
}

html,
body {
  height: 100%;
  width: 100%;
}
.cursor {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  position: absolute;
  background-color: #edbfff;
  z-index: 8;
  mix-blend-mode: difference;
}

.main {
  background-color: #0f0d0d;
}

.page1 {
  min-height: 100vh;
  width: 100vw;
  position: relative;
  z-index: 9;
}

#nav {
  height: 55px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}

#nav img {
  height: 24px;
}

#nav-part2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

#nav #circle {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
}

#nav h4 {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
}

#nav h4:nth-child(1) {
  border-bottom: 1.5px solid #fff;
}

.page1 h1 {
  font-size: 8vw;
  font-weight: 300;
  font-family: PP mori;
  margin-top: 12vw;
  margin-left: 6vw;
}

.page1 h2 {
  font-size: 8vw;
  font-weight: 300;
  font-family: PP mori;
  margin-left: 26vw;
}

.page1 video {
  width: 60%;
  margin-top: 10vw;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

.page2 {
  min-height: 80vh;
  width: 100%;
  padding: 100px 5vw;
  border-bottom: 2px solid #626262;
  position: relative;
  z-index: 9;
}

.page2 h1 {
  font-size: 7vw;
  font-weight: 400;
  color: #111;

  font-family: PP mori;
}

.page2-container {
  height: 60vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page2-left {
  width: 38%;
}

.page2-right {
  width: 24%;
}

.page2-left h2 {
  font-size: 4vw;
  font-weight: 200;
  color: #111;
  line-height: 4vw;
  font-family: PP mori;
}

.page2-right p {
  font-size: 20px;
  color: #111;
  font-family: PP mori;
}

.page2-right button {
  width: 100%;
  border-radius: 50px;
  border: none;
  padding: 4px 0;
  background-color: #edbfff;
  color: #111;
  margin-top: 20px;
}

.page3 {
  min-height: 100vh;
  width: 100%;
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  z-index: 9;
  border-bottom: 2px solid #626262;
}

.page3 h1 {
  font-size: 6.8vw;
  font-weight: 400;
  color: #111;
  margin-left: 100px;
  font-family: PP mori;
}

.page3-part1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.page3-part1 img {
  height: 550px;
  margin-top: 160px;
}

.page3-part1 video {
  height: 450px;
}

.page3-ending {
  padding-top: 100px;

  font-family: PP mori;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page3-ending h1 {
  color: #111;
  font-weight: 400;
  font-size: 5vw;
}

.page3-ending a {
  color: #0f0d0d;
  margin-right: 100px;
  height: 200px;
  width: 200px;
  background-color: #edbfff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 400;
  font-size: 13px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
</head>

<body>
    <div class="cursor">

    </div>
    <div class="main">
        <div class="page1">

            <div id="nav">
                <img src="https://d33wubrfki0l68.cloudfront.net/439bf938233c24af021ffe6d206cd42f546e1143/ff4ed/assets/logo.svg"
                    alt="">
                <div id="nav-part2">
                    <h4>Home</h4>
                    <h4>Work</h4>
                    <h4>Studio</h4>
                    <h4>Contact</h4>
                </div>
                <div id="nav-part3">
                    <div id="circle">

                    </div>
                </div>
            </div>

            <h1>Digitally crafted</h1>
            <h2>brand experiences</h2>

            <video autoplay muted loop src="assets/Pexels Videos 1720428.mp4"></video>

        </div>

        <div class="page2">
            <h1>We are Duo Studio,</h1>
            <div class="page2-container">
                <div class="page2-left">
                    <h2>
                        A CREATIVE COLLECTION MADE TO UNLOCK YOUR BRAND'S POTENTIAL
                    </h2>
                </div>
                <div class="page2-right">
                    <p>We weave together bold strategy and creative execution to produce thought-provoking digital
                        experiences. We take a highly personalized approach to delivering branding, web design, and
                        content marketing solutions. Born in the DC area - now serving clients worldwide.</p>
                    <button>About us</button>
                </div>
            </div>
        </div>

        <div class="page3">
            <h1>Selected Works</h1>
            <div class="page3-part1">
                <img src="https://d33wubrfki0l68.cloudfront.net/aa3d2ff66de5f16336bd94fd68c3c2ce61e29f68/d5064/assets/home/home-casestudy-mgny.webp"
                    alt="">
                <video autoplay loop muted
                    src="https://d33wubrfki0l68.cloudfront.net/a13ea7c2ca2f38134748966280e54af4340ce821/f976d/assets/home/projects_madegood-reduced.mp4"></video>
            </div>
            <div class="page3-part1">
                <img src="https://d33wubrfki0l68.cloudfront.net/aa3d2ff66de5f16336bd94fd68c3c2ce61e29f68/d5064/assets/home/home-casestudy-mgny.webp"
                    alt="">
                <video autoplay loop muted
                    src="https://d33wubrfki0l68.cloudfront.net/a13ea7c2ca2f38134748966280e54af4340ce821/f976d/assets/home/projects_madegood-reduced.mp4"></video>
            </div>
            <div class="page3-ending">
                <h1>VIEW ALL PROJECTS</h1>
                <a href="">DISCOVER</a>
            </div>

        </div>
         </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
    <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>

I created a website using HTML, CSS, JavaScript (locomotivejs, gsap). In which till now I created 3 pages which is working perfectly but for some reasons I cannot see my complete page#3 but when I open my console it goes back to normal and shows complete page but again when I refresh it goes back to half page. I don't know why is it happening can you guys take a look at my code and help my find the issue, Here's my code.( Cannot see the div name page3 when I open live server)

There's is no GSAP on my page#3.

I tried changing height to 100vh or increasing it to 250vh it's not working, and by removing (min) or give just (height) I get a scroll bar on my page no 3 elements.

Also my website scrollbar stop working sometimes for a second or two due to which I m so confused, Kindly guide me.

Thanks.

Answer 1

The problem you are facing is beacuse of the min-height property of every page. you have to set height instead of min-height.As you dont know what will be the height of your page go through trial and error method . or you can set it like this: page1 height: 200vh, page2 height:90vh , page3 height:270 vh , page4 height:100vh, page5 height: 100vh , footer height:100vh (i am also making the sheriyans school project and i have made it a bit different by adding more items in page 3 therefore it is taking viwport of 270vh .)But you can adjust that ,You just have to change the min height to height.Hope that helps