@noahtrotman I'm a bit late for this, almost a year late. I coded Francisca's portfolio. I will explain how it was built.
I used ScrollTrigger+SmoothScroller; the Observer plugin did not exist at the time.
- I created a CSS invisible layout; it's full screen and has a div for each element on the slider, the div is also fullscreen. I use the usual technique for infinite scroll with ScrollTrigger.
- I have a separate div, outside of the scroll container, with the slider images; they are sized with the aspect ratio and size of the viewport.
- I synchronize the position of the "fake" divs to the image slider; I get the position percentage-wise within the viewport and then use that on the image slider, text slider, etc.
- The slider images are not exactly animated diagonally; they have anchor points, kind of like a bezier. [ {x, y, rotation}, {x, y, rotation}, {x,y, rotation}, {x, y, rotation}, {x,y,rotation} ]. From left to right, bottom offscreen, bottom edge, center, top edge, top offscreen. I use the percentage to animate through the bezier
- I use different lerping values on each thing; slider images have a different lerp than for example line 1 of the title, line 2 has a different value, the number on line 1 a different one, and so on.
- The scrollbar is hidden with CSS
- I have several canvases to handle the masks on the texts and the color shift on the texts, too.
- Everything is synced to that "fake" divs scrolling with ScrollTrigger.
- When clicking on the prev/next image, left or right keyboard arrow, I just scrollTo to the desired "fake" div within the scroll.
This is one approach, another one could be something like this: https://tympanus.net/codrops/2021/02/23/creating-an-infinite-circular-gallery-using-webgl-with-ogl-and-glsl-shaders/