nani
nani's Achievements
0
Reputation
-
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 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});
