[Rerender animation on viewport change (react)]

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

 

[iOS Mobile problem - ScrollSmoother + pin large section glitching]

@GreenSock i tried appplying

Quote

Just to verify - did you set smoothTouch: false and ALSO gsap.set(smoother.content(), {clearProps: "transform"}) to get rid of the transform and set ScrollTrigger.normalizeScroll(false)? Was that any better?

 

and it was indeed better, still the scrolltrigger animations and pinning is better just removing completely ScrollSmoother. I dont think is that much of an issue. Since with those settings we are essentially removing smoothscrolling on mobile devices. The only things lost would be the update of scroll and ability to lock scroll (which are pretty neat) but implementing those with vanilla js is quite simple. And the obvious normalizeScroll (which is also super neat!)

I do believe v3.11.0 is way more optimized for iOS browsers, but for now i think ill stick to no smoothscrolling on iOS, scrolltrigger by itself works like a charm.

Its a shame the Safari team has not been helpful, specially with such a highly used browser.

 

thanks 

[iOS Mobile problem - ScrollSmoother + pin large section glitching]

After testing a bit more, if i remove ScrollSmoother on iOS all my scrolltriggers work almost perfectly, ive tried ScrollSmoother with ignoreMobileResize, normalizeScroll and smoothTouch(0.1) with all the combinations i could came up, and sadly without ScrollSmoother the scrolling is way smoother.

[iOS Mobile problem - ScrollSmoother + pin large section glitching]

@here for everyone, i ran my project with the 3.11.0 version and the jittering of the pinning is gone!

But it has other issues, the markers jitter (jump some pixels when scrolling), im using this config for ScrollSmoother:

 

ScrollSmoother.create({
  smooth: 1.2,
  effects: true,
  ignoreMobileResize: true,
  normalizeScroll: true,
});

[iOS Mobile problem - ScrollSmoother + pin large section glitching]

I have stumbled across the same error, @GreenSock or @Cassie how can i install version 3.11.0 with shockingly green npm? i guess its beta. maybe

I can confirm that on the codepen link you folks sent the jittering doesnt happen on iphone 13 iOS 15.5