Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by czkat

  1. 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!
  2. 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?
  3. 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.
  4. 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?