Jump to content
Search Community

nani

Members

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by nani

    ScrollTrigger doesn't Work

    in GSAP

    Posted

    Hi guys,

    I'm trying to use Scrolltrigger and Gsap for the first time by referring to this Demo,
    Layered Pinning From Bottom - ScrollTrigger (codepen.io)
    but it doesn't work at all on my browser.

     

    Look like this in my browser

    ssssss.JPG

     

    I loaded libraries from CDN and copied other codes exactly.

    What seems to be the matter??

     

    EJS CODE 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>

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

    <link href="./test.css" rel="stylesheet">
    <script src="./test.js"></script>

</head>
<body>


  <div id="container">   
    <div class="description panel blue">
        <div><h1>Layered pinning from bottom</h1>
          <p>A simple example where overlapping panels reveal from the bottom.</p>
          <div class="scroll-down">Scroll down<div class="arrow"></div></div>
        </div>
      </div>
    
    
      <section class="panel red">
        <div>
          ONE
        </div>
      </section>
      <section class="panel orange">
        <div>
          TWO
        </div>
      </section>
      <section class="panel purple">
        THREE
      </section>
    
    </div>
    
</body>
</html>

     

    CSS CODE 

    #container {
  width: 100%;
  height: 100%; 
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.panel {
  position: absolute;
  will-change: transform;
}

     

    JS CODE 

    gsap.registerPlugin(ScrollTrigger);

gsap.to(".panel:not(:last-child)", {
  yPercent: -100, 
  ease: "none",
  stagger: 0.5,
  scrollTrigger: {
    trigger: "#container",
    start: "top top",
    end: "+=300%",
    scrub: true,
    pin: true
  }
});


gsap.set(".panel", {zIndex: (i, target, targets) => targets.length - i});


     

    See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen

×
×
  • Create New...