Is it possible to combine ScrollControls with vertical & horizontal sections? [Resolved: External solution]

[quentinbrohan]

Edit:
Wasn't able to work around this by only using ScrollControls, my use case is too complex -> Moved to scroll library + GSAP with multiple canvases.
Feels free to delete/close this discussion as it's irrelevant.

Hell-O!

I'm new to R3F and trying to use multiple ScrollControls for 3 sections as follows starting in vertically:

1. Hero section
2. Horizontal Slider (that's why I need a second ScrollControls)
3. (ideally at the end of the slider) move down to the third section

But I'm facing some issues:

• On the slider section, the scroll event is still triggered from the parent (vertical scroll) — so it doesn't scroll horizontally in the slider and the prev/next arrows aren't working.
• Hard to define when and which scroll is active to split between sections
• I tried to have a look at ScrollControls.tsx file but wasn't able to tweak it to move from one ScrollControls context to another but without success.

Is what I want to do achievable with ScrollControls? Else what would be the alternative or direction more suited to keep both DOM/canvas interactions*? (In the R3F starter, Lenis library got added as an example for smooth scroll, I may look into it I can't resolve my issue afterward)

*I need interaction on canvas image for adding a shader on hover, and tried initially LocomotiveScroll + GSAP by syncing canvas images Y position but I was having either interaction with only the DOM text or canvas.

Here's a representation showing the flow I want to have:

Basically moving from one section to another once arriving at the start/end of the closest section (similar to some GSAP plugin).

And a quickly done sandbox with only the first 2 sections:
https://codesandbox.io/p/github/quentinbrohan/issue-r3f-drei-nested-scrollControls/main?file=%2FREADME.md

Note: I'm using React Three Next as a starter (https://github.com/pmndrs/react-three-next).

Thanks for your help!