czkat Posted March 7, 2021 Share Posted March 7, 2021 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 More sharing options...
GreenSock Posted March 7, 2021 Share Posted March 7, 2021 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. 1 Link to comment Share on other sites More sharing options...
czkat Posted March 7, 2021 Author Share Posted March 7, 2021 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 More sharing options...
czkat Posted March 7, 2021 Author Share Posted March 7, 2021 I just tried it outside of kirby and it still does not work. There probably is a basic misunderstanding on my part. Do you see where my code is wrong? Link to comment Share on other sites More sharing options...
GreenSock Posted March 8, 2021 Share Posted March 8, 2021 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? 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now