Jump to content
Search Community

ScrollTrigger only works when resizing window

czkat test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

Welcome to the forums, @czkat!

 

We'd be happy to help when you provide a minimal demo - it's pretty much impossible to troubleshoot blind. I don't see any obvious problems with your sample code there. And I've never heard of Kirby. My guess is that the problem might be related to something Kirby is doing. 

 

If Kirby loads things in dynamically, perhaps you just need to call ScrollTrigger.refresh() once it's ready. 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Ah, it's because you've got a bit of a funky CSS setup where your trigger is inside of a container that's scrollable, but you also have the body as scrollable and you forgot to define the "scroller" property of your ScrollTrigger. 

 

I think this is what you intended: 

See the Pen c854c8c3ae801f018f6413d24532fe85?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Think of it this way: ScrollTrigger needs to know which scrollbar to watch (which element's "scroll" event to listen to). By default, that's the viewport/body/documentElement. But in your case, you were using a completely different scroller. So in your original example, ScrollTrigger was indeed watching the viewport's scrollbar to sense when it should trigger...but it wasn't moving because you had a nested element that was scrolling instead, and THAT is the thing you wanted ScrollTrigger to watch. 

 

It's all solved by defining the appropriate "scroller". 

 

I personally find your setup quite confusing as a user, though - I'm spinning my mousewheel to scroll in the viewport, but that scrollbar doesn't move at all because you've got a nested element hijacking things. Not "wrong" - just unintuitive in my opinion. :)

 

Does that clear things up?  

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...