czkat
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by czkat
-
Hello, I am trying to use of the "Pinned Sidebar with different content" example: https://codepen.io/akapowl/pen/6a2480c123d88dc391faba0ea5cc590f However, I keep getting a "scrollEvent.js:5 Uncaught ReferenceError: Scrollbar is not defined" error. Does anyone know what I am forgetting here? Thanks!
-
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?
-
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.
-
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?