Jump to content
GreenSock

PremierPlymouth

Scrollsmoother, Scrolltrigger iPhone orientation change

Recommended Posts

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!)

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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().

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×