ScrollTrigger doesn't Work

nani · February 11, 2021

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

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

mvaneijgen · February 11, 2021

There are some extra things you need to do when you want to animate `:pseudo` elements. You'll need the CSSRulePlugin see following post and the docs.

https://greensock.com/docs/v2/Plugins/CSSRulePlugin

Also try to make a minimal demo and share that, much easier to help you with a live demo instead of looking at raw code.

akapowl · February 11, 2021

Hey @nani - welcome to the forums

31 minutes ago, mvaneijgen said:

Also try to make a minimal demo and share that, much easier to help you with a live demo instead of looking at raw code.

@mvaneijgen is right on that. Without a demo to test around with ourselves, it often comes down to guessing what could be causing problems.

And often times, when you create such a minimal demo you will figure out what's causing your issues yourself.

That said, my guess would be that it doesn't work at all for you, because you load all javascript files in the <head> of your HTML.

So the script might get executed before the elements that you want to address have been processed in your HTML.

Thus, one recommendation would be to load your neccessary js-files only just before the closing-tag of the </body>.

Let us know if this helps.

Cheers,

Paul

Edit:

Oh, and one more thing.

That demo pen you linked to, has CSS linked to it from another pen on codepen, which you will see, when you open that pen in a seperate window and then click on the gear-icon in the CSS section, so if you want to get it working like in the pen, you would probably have to consider that CSS for your setup, too, because it contains the neccessary setup base.

Notifications

Messages

ScrollTrigger doesn't Work

Recommended Posts

nani

Link to comment

Share on other sites

mvaneijgen

Link to comment

Share on other sites

akapowl

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members