Pinned sections and resize

[BKraupa]

Hi GSAP community!

 

based on the official ScrollTrigger.matchMedia() Demo, I have a Problem to put more than one pinned secion in my site. 

 

In my Pen, try to scroll down to the red or blue section and change the HEIGHT of the window. After this resize, in best case you see an flicker, in worst case you are completely lost on the site, because the scroll position is changed. 

 

Is there a way to keep the scrollposition on resize?

 

Thanks to you.
Best regards

See the Pen MWQPwYj by b-kraupa (@b-kraupa) on CodePen

[Cassie]

Hey there!

Welcome to the GSAP forums.

This isn't exactly what you're after, but my response to this sort of thing is always - hardly anyone aside from developers actually resize their browser window, and when people do resize their browser window, they're usually trying to see another window or bit of information and don't really even notice what happens to the original window aesthetically.

I'm sure there is a way to do it, and maybe someone will give you a hand, but my advice would be not to worry about it.

[GreenSock]

Try adding this to your last ScrollTrigger: 

onRefreshInit: self => self.prevScroll = self.scroll(),
onRefresh: self => self.scroll(self.prevScroll)

Does that help?

[BKraupa]

14 hours ago, Cassie said:

Hey there!

Welcome to the GSAP forums.

This isn't exactly what you're after, but my response to this sort of thing is always - hardly anyone aside from developers actually resize their browser window, and when people do resize their browser window, they're usually trying to see another window or bit of information and don't really even notice what happens to the original window aesthetically.

I'm sure there is a way to do it, and maybe someone will give you a hand, but my advice would be not to worry about it.

 

 

 

Almost every mobile device resizes its browser window by simply scrolling back and forth; the address bar will fade in and out, causing a resizing each time. This was exactly my initial problem, I just wanted to make it easier for the forum request.

[BKraupa]

11 hours ago, GreenSock said:

Try adding this to your last ScrollTrigger: 

onRefreshInit: self => self.prevScroll = self.scroll(),
onRefresh: self => self.scroll(self.prevScroll)

Does that help?

 

Dear Jack,

 

you pushed me in the right direction. It's not enough to just restore the scroll position, but using the window height to calculate the relative scroll height works as intended.

 

onRefreshInit: function(self) {
  self.prevWindowHeight = $(window).height();
  self.prevScroll = self.scroll();

},
  onRefresh: function(self) {
    var afterWindowHeight = $(window).height();
    self.scroll(self.prevScroll / self.prevWindowHeight * afterWindowHeight);
  }

 

Many thanks for the help!

[Cassie]

2 hours ago, BKraupa said:

Almost every mobile device resizes its browser window by simply scrolling back and forth; the address bar will fade in and out, causing a resizing each time. This was exactly my initial problem, I just wanted to make it easier for the forum request.

Ah! Yeah of course - mobile. Sorry I was thinking desktop resizing. Apologies. You can also use this.

ScrollTrigger.config({ ignoreMobileResize: true })