Catalin R. Posted March 9, 2023 Posted March 9, 2023 Hi, Into a complex project I need for the first section an effect made with ScrollTrigger plugin. I can't use once method (once: "true") because it's difficult to avoid a jump. I've put a class on body tag using onLeave method and when I have this class I want to change end to be: end: "top top". Is that possible? I want to have this effect (scrub and pin) only once. Thanks! See the Pen NWLwgLR?editors=0010 by ZenTao (@ZenTao) on CodePen.
Cassie Posted March 9, 2023 Posted March 9, 2023 Hi there Catalin - Quote I can't use once method (once: "true") because it's difficult to avoid a jump. This doesn't sound right to me. You shouldn't be experiencing jumps with once: true Could you possibly provide a working demo showing the jump, the issue could be with CSS, HTML or an external library. It's very difficult (often impossible) to debug with just GSAP code.
Catalin R. Posted March 9, 2023 Author Posted March 9, 2023 Hi Cassie, See the Pen VwGrQLp?editors=0010 by ZenTao (@ZenTao) on CodePen. https://www.v7.esthetic.stempora.me/ It's impossible to replicate the entire project into a pen. There're a lot of JavaScript code integrated. You will see that if I use once: true, a gap appears upon the first section. I've tried to fix it with css and JavaScript but doesn't work properly. Thanks!
Cassie Posted March 9, 2023 Posted March 9, 2023 Sorry, but we can't debug without a minimal demonstration of the issue. I've worked on many 'complex' projects and run into a lot of horrible tangly bugs and the thing that helped every single time was stripping it back to the basics. See if you can recreate the issue with as little CSS/JS as possible. If not, incrementally add in your code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.
Cassie Posted March 9, 2023 Posted March 9, 2023 Quote It's impossible to replicate the entire project into a pen. There're a lot of JavaScript code integrated. That's ok! The whole project won't be any help anyway. We just need to see the particular animation you're struggling with
Cassie Posted March 9, 2023 Posted March 9, 2023 Here you go, I gave it a bash based on the video, hopefully this is the issue? In future please give us some HTML and CSS to work with though, it's incredibly helpful and saves a lot of time guessing what the issue is! See the Pen ZEMarvG??editors=0010 by cassie-codes (@cassie-codes) on CodePen. 1
Catalin R. Posted March 9, 2023 Author Posted March 9, 2023 Hi Cassie, It's not about debugging! You have nothing to debug! I've asked about if exists a way to change the value of end property from "bottom top" to "top top", using a class (.no-effect) put it on body tag with onLeave callback function! When I have class no-effect on body I need the value of property end to be "top top". That's all! Thanks!
GreenSock Posted March 9, 2023 Posted March 9, 2023 1 hour ago, Catalin R. said: You have nothing to debug! You mentioned a "jump" occurring (which you wanted to avoid), so that sounded like debugging. And it's a little unclear (at least to me) if you're trying to change the "end" value on the ScrollTrigger only after it already reached its end (maybe you're applying the .no-effect class from within the onLeave of the very same ScrollTrigger?) or if you're saying you want to create the ScrollTrigger initially with the end value conditionally dependent on whether or not .no-effect is on the <body>. That's why is incredibly helpful when you can provide a minimal demo that illustrates the problem you're trying to solve. 4 hours ago, Catalin R. said: I want to have this effect (scrub and pin) only once. In order to do pinning (and not have things overlap), pinSpacing is added in order to push the elements below the pinned element further down to compensate for the pinning distance. So let's say you pin the element for 500px. That means the pin-spacer adds a padding-bottom of 500px (pushing things down). If you get to the end of that ScrollTrigger and then kill() it (which is basically what once: true does), then of course that pinSpacing gets removed (as it should). Removing that 500px of pinSpacing would obviously shift things up. That's why Cassie is doing that work in the onLeave to adjust the scroll position to compensate for that shift. 1 hour ago, Catalin R. said: I've asked about if exists a way to change the value of end property from "bottom top" to "top top", using a class (.no-effect) put it on body tag with onLeave callback function! Can you help us understand the "why" behind your request? It's confusing for me because it sounds like you're asking how to change the end value of a ScrollTrigger that has already finished and you want to kill (so why alter the end value of a ScrollTrigger that's no longer in effect?). I glanced at your code and it sure looks like that's what you're attempting but I'm trying to understand your ultimate goal because that approach doesn't make logical sense in my head (but I'm sure it will once you explain your ultimate goal). When you provide a minimal demo that clearly illustrates the issue, it saves everyone a lot of time, back-and-forth, etc. because we can see things in context and can very quickly diagnose problems and offer solutions, often by just forking your demo and applying the fix and posting it here. 5
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