Horizontal Scroll Section with Absolutely Positioned Sidebar (Issues with resizing)

[Avenues]

Hi! 

 

I am new to GSAP and ScrollTrigger. I am trying to create a section for my website that utilizes a horizontal scroll. The section has a sidebar that needs to stay in place as you scroll through the horizontal section. I've been able to set-up this functionality; however, on resize of the window at certain breakpoints, the sidebar moves to what appears to be the true "left: 0" position. As soon as you scroll again it corrects its position. Is there a way to prevent the sidebar from moving on window resize? Or should I approach how to keep the sidebar absolutely positioned differently? 

 

Appreciate any and all advice! 

Thank you so much!

Nicole

See the Pen KKxmxwL by nicolekbaird (@nicolekbaird) on CodePen

[Rodrigo]

Hi,

 

At what specific screen width are you seeing this issue? I kind of see something a few times in a small screen (phone), but not always.

 

I forked your codepen and the only changes I made was to add this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

And this to the CSS:

.outer-container {
  border: 1px solid red;
  height: 100vh;
  overflow: hidden;
}

I tested on Ubuntu 20 & 22 on the latest Chrome and Firefox, on an iOS deivce (Safari, Firefox, Chrome) and an Android device (Chrome, Firefox) and it seems to work as expected, maybe I'm missing something here.

 

See the Pen poOPYwO by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps. If you keep having issues, please be as specific as possible about it.

Happy Tweening!

[GreenSock]

I see the issue you're talking about, and it should be resolved in the next release which you can preview at: 

https://assets.codepen.io/16327/ScrollTrigger.min.js (you'll probably need to clear your cache)

 

Here's a workaround to add to your sidebar ScrollTrigger:

onRefresh: self => self.animation.progress((horizontalScroll.time() - self.start) / (self.end - self.start))

 

See the Pen vYzmMKp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better? 

[Avenues]

Hi there!

 

I added the onRefresh in and no longer see the movement of the sidebar on screen resize! Thank you so much! I appreciate the help! 

 

Nicole