kiboko

Oh my god man, you're officially my hero. I just saw what you did with the end() parameter, I feel like a complete dumb***! I was looking at it from a completely wrong perspective... the road I chose was a complete dead end, and I understand why now. Seriously, thank you so much for your patience and dedication! Super appreciated!

@mvaneijgen Thank you so much. Your solution is extremely clear, but this way I would basically "justify" the offsetLeft method instead of reading the correct value within the scroll distance available. The ideal solution would be to find out how dynamically find the correct "scrollLeft" value to apply to the container, so that it scrolls exactly to where the wanted element is but within the available scroll space. For instance, the third/fourth section probably will never make it to the left side of the screen since there's not enough scrollable distance to allow that, but in that case it should just scroll to the extreme right and that's it (So basically there would not be blank space after the last section to the right). So basically I would have to find a way to proportionate the offsetLeft value of the element within its container's available scroll distance, finding how much I should tell the scrollTrigger to scroll() in order to have that desired section at the left edge of the screen. Does it make sense? I'd be extremely grateful if you have any idea how to maybe achieve this, but I don't want to burden you too much. Thank you very much!

@GSAP Helper This should work: https://codepen.io/Marghen23/pen/JjwPwwQ I've added a comment in the code. As you can see the values that are read are inconsistent for some reason. Thank you

Hi @Rodrigo, thank you for your answer. They both make sense, but I can't understand how to apply this to my solution. I'll try to explain better: I have 1 scrollTrigger that scrolls a section horizontally (which is 100vw and 100vh) and it contains different sections with variable widths. I need to have a navigator like in your examples, and I wanted to use the scrollTrigger.scroll() method to make the container scroll to the correspondent section. Now the problem is, that to use the scroll() method I need to know the distance in pixel that I want to be scrolled beforehand, therefore I was wondering if there was any way to either obtain the pixel distance from start of any element inside the scrollTrigger, or at least its corresponding .progress value after page load, to bind the navigator to a function that will computed this distance after the click. Something on the lines of a .getBoundingClientRect().left inside the scrollTrigger. I hope it makes more sense now. Thank you very much!

Sorry to reopen this topic @GreenSock, but there's something I can't quite wrap my head around, and it's probably because of thinking about it the wrong way: To use the scroll() method (let's say to make a horizontal scrollTrigger scroll to a certain element contained within) I need to know the corresponding progress value of each element to then convert it into pixel value and the scroll to it. Isn't there a better way to calculate a pixel position on an element inside a scrollTrigger so that we can use the scroll() method more freely? Thank you very much!

Hey Zach, this really helped me thank you. However, it seems to me like the ScrollTrigger.getById should be moved before the tl.kill command, otherwise if the ScrollTrigger was originally initialised within the timeline it will end up and trying to kill 'undefined'. Am I wrong? Thank you!