Integrating Horizonal and Vertical scrolling with anchors between sections. Trying to emulate an effect on example website.

[dev-dr-mustin]

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.

See the Pen bGJJZoJ by dustmr (@dustmr) on CodePen

[Rodrigo]

Hi,

 

I think the biggest issue is your initial setup. If you check the site you linked every section's top is at the same level soto speak. The last part of each section is never at the same level as the top of the next, they all start at the same level.

 

Also I think the best approach is to create a single timeline and add a part to that timeline for each section, the trick is that moving the sections horizontally has to be in the previous section and not the next one. For example if you move the first section all the way to the bottom, that part of the timeline should also move the sections to the left. If you add a label to the start of each part of the timeline, then you can ScrollTrigger's labelToScroll method in your buttons:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()

 

Here is a super simple demo I made using this approach, you can toggle the overflow to see my idea of the setup:

See the Pen VwNNNJw by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[dev-dr-mustin]

@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.

[Rodrigo]

No problemo, that's why we're here for and we all have been through something like that, so I totally understand!

 

Happy Tweening!

[dev-dr-mustin]

@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]

Mhhh... there could be an issue with the labelToScroll method, we'll check and report back.

 

Is this causing an issue? In the demo I made I see no problems with that small percentage being off, I don't see a line at either side when clicking the buttons.

 

Happy Tweening!

[dev-dr-mustin]

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.

 

 

[GSAP Helper]

Yes, it would be super helpful if you provided a very clear minimal demo illustrating the issue. 

 

From a quick glance, my guess is that it's a logic thing related to the fact that the scroll position has a limited resolution. For example, imagine if labelToScroll() returns 500.4567. Well, the browser will only allow you to scroll to whole pixel values. So it'd make perfect sense if your animation doesn't go exactly to the spot you were expecting (but close). See what I mean? 

[dev-dr-mustin]

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.



 

 

 

[dev-dr-mustin]

Sorry @Rodrigo,

Trying to add minimal demo above. Seems to not be linking correctly. I have updated my original pen demo.

See the Pen ZENzagd by dustmr (@dustmr) on CodePen

[GreenSock]

Yeah, that sure looks like the problem is exactly what @GSAP Helper said it was. You can't scroll to non-whole numbers. It's not a limitation of GSAP - browsers just won't do that. 

 

Since you're using ScrollSmoother, you should be able to animate its scrollTop to the exact value you need: 

See the Pen LYoPejL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that any better? 

[dev-dr-mustin]

Hi,

 

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

[dev-dr-mustin]

Hi again @Rodrigo,

 

I'm still working on this application of GSAP and am happy with how far I've come with your continued support.  I am wondering if there is a way to pause scrolling when a navigation menu is toggled open. I've added a bare bones example to my previous pen.  I'd like for the page to not scroll when the menu is open and the user scrolls. I've tried a few pause() implementations from here https://gsap.com/docs/v3/GSAP/Timeline/pause()/ to no avail.

Any help pointing me in the right direction would be appreciated.

 

Thank you.

See the Pen wvbKKgw by dustmr (@dustmr) on CodePen

[GreenSock]

If I understand your goal correctly, you can just use ScrollSmoother's paused() method:

 

See the Pen vYwNNdP?editors=0010 by GreenSock (@GreenSock) on CodePen

[dev-dr-mustin]

Ugh, again I am overlooking my mistakes. I had tried that but I had some matchMedia queries for touch devices (janky scrolling), and it was throwing this with the dropdown menu function: 

scrolling.js?v=1715808682:304 Uncaught ReferenceError: smoother is not defined

Thank you for the help.

[GreenSock]

Are you saying you still need help to figure out that error or are you saying you're all good now? 

[dev-dr-mustin]

Sorry. All good now.

 

Thanks!