Scrollsmoother, Scrolltrigger iPhone orientation change

[PremierPlymouth 2 Likes (Newbie)]

I have a project using ScrollSmoother & SCrollTrigger. Amazing btw! In the project I have ScrollSmoother doing its thing in general along with some jump to elements and a couple items with data-speed attributes. ScrollTrigger is handling some batched items to fade in and up along with a few pinned / scrubbed items. One fake horizontal scroll ScrollTrigger is disabled when using touch devices.

 

Everything is working well until I rotate my iPhone (11 latest iOS). I have added an additional debounce that calles .sort() & .refresh but once a change in orientation takes place it appears that the (I think) padding is not updating itself as elements appear cut off, in the wrong place and / or Timelines will not execute.

 

I've set my ScrollSmoother up before any ScrollTriggers with the following parameters:

smooth: 1,
effects: true,
normalizeScroll: true,

 

Am I missing something or is this still being worked on?

 

Thanks for the great code, truly awesome. (I still remember the Flash version that I also loved, especially the transform tool!)

[SteveS 175 Likes (Specialist)]

Hi @PremierPlymouth, welcome to the forum.

It's hard to say without seeing your code. When you load into your page in landscape mode does everything work as expected?

[PremierPlymouth 2 Likes (Newbie)]

@SteveS thanks for taking the time to read my post.

Yes, everything works well and as expected on either orientation.

The issues only happen on orientation change which I thought triggered a resize event and would be handled by the built in listeners along with my addition debounce.

Looks like only the pinned/scrub elements and those with data-speed attributes are effected.

The batch triggers are working fine as are the scrollTo calls on my ScrollSmoother instance.

[SteveS 175 Likes (Specialist)]

On orientation change, are you firing ScrollTrigger.refresh()? Based on your original post I'd be curious if the extra debounce you've implemented might be messing with things. You can also call refresh directly on the scrollSmoother with ScrollSmoother.get().scrollTrigger.refresh().

[PremierPlymouth 2 Likes (Newbie)]

"You can also call refresh directly on the scrollSmoother with ScrollSmoother.get().scrollTrigger.refresh()."

 

Thanks, I will try this. I did try swtiching all my triggers to reference the one created by the smoother.

I was clearly doing that wrong... 

[PremierPlymouth 2 Likes (Newbie)]

Interesting... The issue only presents itself when an orientation change takes place when the page is part scrolled or scrolled all the way to the bottom. If I make the page snap back to the top on orientation change and then call / recall the refresh method it might be a solution.

[SteveS 175 Likes (Specialist)]

Still not super optimal. You could try invalidating the smoother trigger on refresh, but I feel if that was needed it would be a default behavior.

[GreenSock 17,854 Likes (Superhero)]

Indeed, it's virtually impossible to troubleshoot without a minimal demo to look at and reproduce the problem. Are you using the latest version of all the files? I'll DM you with a link to a beta version if you'd like to try that. 

[PremierPlymouth 2 Likes (Newbie)]

It didn't work. Now I'm thinking along the lines of window.location.reload but that's really clumsly.

I have a different version that relies on ScrollTo for the section jumping and doesn't use ScrollSmoother.

Pity as ScrollSmoother is very nice! Could well be the swiper js and/or particle js instances I have in there causing problems.

Might even be the change in layout via the tailwind css / arbitray media query variant I have in there also.

 

Thanks again for talking it through with me

[PremierPlymouth 2 Likes (Newbie)]

1 minute ago, GreenSock said:

Indeed, it's virtually impossible to troubleshoot without a minimal demo to look at and reproduce the problem. Are you using the latest version of all the files? I'll DM you with a link to a beta version if you'd like to try that. 

I'm using the latest code thanks. I have svgs with the data-speed attribute and parts of them disappear as part of the issue.

I'll make a new simpler demo to see if I get the same issue. Thanks for taking the time to look at this.

[PremierPlymouth 2 Likes (Newbie)]

On 6/30/2022 at 4:49 PM, GreenSock said:

Indeed, it's virtually impossible to troubleshoot without a minimal demo to look at and reproduce the problem. Are you using the latest version of all the files? I'll DM you with a link to a beta version if you'd like to try that. 

I've just used the beta files you kindly sent over and the issue is gone!

The issue persists if I don't use my own debounce with the following calls:

        ScrollSmoother.get().scrollTo(0, false)
        ScrollSmoother.get().scrollTrigger.refresh()
        ScrollTrigger.sort();
        ScrollTrigger.refresh();

So something in (my other code most likely😜) could be interfering with the gsap sort/refresh calls???

Anyone reading this should know that the project also uses a swiperjs instance, a particlejs instance, some custom code along with the mighty gsap that is using ScrollTrigger, ScrollSmoother & DrawSVG so there is a lot going on! ScrollSmoother has been added to replace ScrollTo for some added polish and the subtle parallax effects.

 

Thanks again for such a great library and awesome support!