Jump to content
Search Community

czkat

Members

  • Posts

    4

  • Joined

  • Last visited

 Content Type 

Posts posted by czkat

    ScrollTrigger only works when resizing window

    in GSAP

    Posted

    Thank you for the reply!

    This is the code I am trying to get to run: 

    <html>
  <head>
    <style>
      .container {
        height: 100vh;
        width: 100vw;
        overflow-y: scroll;
      }

      .scroll-container {
        height: 200vh;
        width: 100%;
      }

      .box {
        width: 10px;
        height: 10px;
        margin-top: 150vh;
        background-color: red;
      }
    </style>
  </head>

  <body>

    <div class="container">
      <div class="scroll-container">
        <div class="box">
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>

    $( document ).ready(function() {
      ScrollTrigger.refresh()
      gsap.to(".box", {
        scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once)
        x: 500
      });
    });

    </script>
  </body>
</html>

    Kirby is a content management system. If there is nothing wrong with the code I guess this is more a Kirby question than a GSAP-one.

    ScrollTrigger only works when resizing window

    in GSAP

    Posted

    Hey everyone,

     

    I am doing my first steps with GSAP right now. I am using it with Kirby and try to trigger some scroll events.  

    I startet with the simple 

      gsap.to(".box", {
    scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once)
    x: 500
  });

    Unfortunately, the animation is only triggered when I resize the browser window. How can I fix this? Any hint is appreciated?

×
×
  • Create New...