Codetipi

If you have a ScrollTrigger with an onEnter() method, it only runs if you literally scroll past the Start marker - which is expected. But if you scroll to the end of a page and refresh the page, the onEnter event isn't triggered. If you take the Lazy Load example in the codepen (although it isn't really possible to test what I'm saying there), then refreshing at the end of the page would mean the images' lazy load method would never trigger. It would only happen if the user scrolled up past the start marker and then back down to trigger the onEnter method. Is there an event similar onEnter() that would trigger if marker is "on Enter or if already past"? I can see trying to use ScrollTrigger for injecting content via infinite scrolling for example being problematic without something like this.

Yeah that would work too, but I tried using the .kill() method on the tl var, and it doesn't seem to do anything. I must be using it wrong - but I saved the pen with it applied.

I'm looking to freeze the "y: movement," changes of the layers. As a quick example, imagine adding a "disable parallax" button on that page for visitors to click if they wanted to disable the header parallax effects from running. Edit: adding the disable() to the pen, but it doesn't seem to work.

Hey guys, Is there a way to pause (or remove) a timeline with ScrollTrigger? In the pen attached I added a timeout just to test it out, but it doesn't pause it. Thanks!

P.s do you guys do a premium/paid for support service or anything similar that you could forward me to? As I would happily pay extra for your time in helping explore if this sticky sidebar functionality is fully doable with ScrollTrigger

Oh wow that's incredible of you. Thank you for your efforts. It's 90% there, there is only one small thing missing to make the functionality perfect for sticky tall sidebars, and that is that when you scroll half way down the page, the sidebar should stay frozen and be "scrollable". As in, if you scroll down to the middle of the page, and then scroll upwards again, the whole viewport scrolls but the sidebar stays until you pass the top edge again and it becomes sticky at that point again. And if instead of reaching the top edge of the sticky element, you start scrolling downwards again, it still stays frozen until you hit that bottom edge and at that point continues being sticky. You can see this happen in the sticky sidebar script example I shared - this functionality is the only reason theme developers like me use popular scripts like Sticky Sidebar, HC Sticky, Sticky Kit, etc instead of just using "position: sticky". If ScrollTrigger can do this, I'm sure everyone needing proper sticky sidebars would flock to using it. Hope my explanation makes sense and thanks again

Thanks again, but not quite It's a bit tricky to explain it, but essentially yes, when scrolling downwards that is the desired behaviour. However, when you scroll back up, the bottom is no longer fixed, it's only when you scroll past the top of the sticky element that it becomes fixed again from the top. And the sticky element doesn't actually move at all if you're in the middle of the page scrolling up and down without hitting an edge of the element itself. Try scrolling in this demo again but ensure it's the "Scrollable Sticky Element" example: https://abouolia.github.io/sticky-sidebar/ Scroll to the bottom, then back up and notice the sticky sidebar only being fixed in connection of scrolling direction, and even if the sidebar is stuck in the middle of the page, you can scroll up and down and it won't move any more (until you pass the top/bottom edge). Thanks so much for looking into this, really hoping ScrollTrigger is able to do this.

Thanks for that! But I didn't quite mean that scenario, I meant this one: https://codepen.io/forthetipi/pen/WNryJJj It's in that situation that the ideal behavior for great user experience is this:

Hey guys, Started playing a bit with ScrollTrigger and loving it, great job! Is it possible to pin elements taller than the viewport and make them scrollable though? Like this: https://abouolia.github.io/sticky-sidebar/ check out the "Scrollable Sticky Element" example, try scrolling up and down to see what I mean. Fingers crossed