Scrolltrigger horizontal scroll: how to avoid the jump at the beginning, how to have a 100vw panel at the end display full-width, and how to have different sized panels behave in a liquid manner when resizing the browser

[zevonjunior]

Thanks in advance! I am very much a GSAP newbie, so sorry if I haven't formulated my questions in the best manner.

 

I am trying to create an horizontal scroll display with no fancy animations, just a smooth scroll.  
That said, after starting and fiddling with one of your examples I have 3 issues I need help on:

  1 -- how do I avoid the bump jump at the beginning of the scroll;

  2 -- at the end I would like to display a full-screen panel, which will have a form in it. So far I have been unable to achieve;

  3 -- the panels will be of various widths and heights -- determined by their content.  Some start from the top, some from the bottom, with a variety of margin settings to create variety.   Within the horizontal scroll, if I resize the browser, I would like all these panels and content elements to maintain their proportions in a fluid manner. I have attempted to accomplish this using vw and vh units, but perhaps I should be using percentage units, at least for some of this.

 

So: what is the cleanest manner of achieving such an horizontal scroll component with panels of varying widths and  heights, some from the top some from the top, and at the end having a full width panel?

 

Thanks for the wonderful tool - Scrolltrigger -- and thanks in advance for whatever help you offer. It is much appreciated.

 

See the Pen JjrmxaM by zevonjunior (@zevonjunior) on CodePen

[GreenSock]

1 hour ago, zevonjunior said:

  1 -- how do I avoid the bump jump at the beginning of the scroll;

I don't see any bump jump, but if you're talking about a little jump that happens when it first pins, that has to do with the fact that browsers handle scrolling on a totally different thread that isn't synchronized with the JS thread, thus when you scroll quickly the browser will update the screen as if everything scrolled, but then a tiny fraction of a second later it updates the JS thread and ScrollTrigger says "hey, buddy, pin that element" so it renders at the correct/pinned spot. There's absolutely nothing ScrollTrigger can do (that I know of) to force the browser to keep those in sync. The only option I see is to actually shift to using JavaScript to do all the scrolling too, like by using a smooth scrolling library or our very own helper function which you can see on the scrollerProxy() docs page. 

 

1 hour ago, zevonjunior said:

  2 -- at the end I would like to display a full-screen panel, which will have a form in it. So far I have been unable to achieve;

I think that's because of the way you've got things set up CSS/HTML-wise. It never actually reaches the maximum distance. Check the progress in the onUpdate. Your element is 80vh and you're telling it to pin for 9000px so it does indeed add the 9000px padding to the bottom of your element but your page isn't allowing it to reach all the way down 9000px.  It looks like you could just add margin-bottom: 20vh to your #container to resolve that. 

 

1 hour ago, zevonjunior said:

  3 -- the panels will be of various widths and heights -- determined by their content.  Some start from the top, some from the bottom, with a variety of margin settings to create variety.   Within the horizontal scroll, if I resize the browser, I would like all these panels and content elements to maintain their proportions in a fluid manner. I have attempted to accomplish this using vw and vh units, but perhaps I should be using percentage units, at least for some of this.

Are you seeing a problem currently? I was a bit confused by your question/statement here. Are you just asking if we advise that you not use vw/vh units? That's totally fine. It really shouldn't matter. Just keep in mind that ScrollTrigger intentionally delays doing a ScrollTrigger.refresh() until the user has stopped resizing the window for 200ms in order to maximize performance. Otherwise, things could get very janky while the user is dragging and that's a total waste of resources anyway. See what I mean? 

 

I hope that helps.