dev-dr-mustin

Hi, That solution is much better, thank you. I wouldn't have thought of that. Thanks a lot.

Sorry @Rodrigo, Trying to add minimal demo above. Seems to not be linking correctly. I have updated my original pen demo. New Updated Demo

Hi @Rodrigo, Here is a minimal demo I whipped up. You'll see with the overflow showing when we click section buttons the borders don't quite line up with header. Still trying to achieve the effect seen on the site I am trying to emulate. https://codepen.io/dustmr/pen/bGJJZoJ

Hi @Rodrigo, It's causing a problem with the design as I have the overflow showing with border-lefts on the section so it doesn't quite line up correctly. If needed I can make an updated minimal demo. Thanks for taking a look.

@Rodrigo, Hi again, I'm running into some more issues with this implementation. When I use the click function here: buttons.forEach((btn, i) => { btn.addEventListener("click", () => { gsap.to(window, { scrollTo: { y: tl.scrollTrigger.labelToScroll("section-" + i) }, ease: "power1.inOut" }); }); }); Occasionally the transforms on sections don't hit the whole percentage numbers they're aiming for, causing the sides of div to not line up correctly to the container. For example: The first div ends here: transform: translate(-99.9166%, 0%) translate3d(0px, 0px, 0px); Instead of ending here: transform: translate(-100%, 0%) translate3d(0px, 0px, 0px); Do you have any idea why this could be happening? Maybe due to resizing with browser inspector tools open? Cheers

@Rodrigo, Thank you so much. I was stuck in a loop of exhaustive problem solving and I'm not ashamed to say I couldn't get out if it. Sometimes it takes another brain to help out and you did. This looks great and definitely a smarter way to set it up. Thanks for your time and also for the demo -- this is a tremendous help. This will save me a lot of stress. Cheers.

Hi There, I have been using GSAP for a while and am comfortable with a lot of the basics but am trying to recreate the scrolling and click interaction effects seen on this page: https://halfof8.com/about You can see that each 'section' is vertically scrollable and then when user gets to bottom of that 'section' the whole section horizontally scrolls over and the next vertical scrollable 'section' starts. This is the biggest issue for me as you can see in the example I provided. I have the vertical scrolling working but you'll see the next 'section' in is not where it is in the example. The example sort of mimics a standard slider/carousel where the next item is queued up to go whereas with scrollTrigger I am stuck with the next section being adjacent to the bottom of the current vertically scrollable section. The other issue I am having is I cannot get scrollTo to scroll to the top of next section, it either scrolls to bottom of current vertical section or over to the correct next section but too far down. Any help would be appreciated, I'm trying to be as clear as possible. My skills may not be quite there or maybe this is something better left for an application outside of GSAP. Thanks for you time.

Hey @Rodrigo, Thanks for the help. I think I've figured it out now. Cheers.

Hi There, I'm new-ish to GSAP but have been able to have some success with prior projects which were a bit more elementary and straight forward. I am trying to implement functionality as seen in the demo titled 'Fake Horizontal Gallery Transition' here: https://greensock.com/st-demos/?d=19 It's obviously a great starting point but I am having little to no success modifying the line: const [x, xEnd] = (index % 2) ? ['80%', (w.scrollWidth - section.offsetWidth) * -1] : [w.scrollWidth * -1, 0]; I am wondering if there is a way to stop each .wrapper div before it horizontally scrolls across the whole viewport/screen. In my case, I would like to stop the odd numbered wrappers on the right side of my 1200px grid and the even numbers wrapper divs on the left side of my grid. Any help would be appreciated as I'm not sure this is common functionality users are seeking. I'll keep plugging away until then. I've attached a screen capture below to hopefully illustrate more clearly than my words can.