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});