Having an issue with flex/height

[qlpo]

Hello,

I am new to gsap and I am having on issue. 
On my website I use tailwindcss and I have a main layout for my pages. Instead of using "fixed" position for my headers/navigations I am using "flex-1" (flex: 1 1 0%; in normal css) on my main content with an overflow-scroll so my headers/navigations remain as if they were "fixed" at the top but the content is scrollable. You can refer to the CodePen.

However in order for my layout to work I need to add "h-screen" (height: 100vh; in normal css) to the main element, but when I do so then the gsap animations don't work anymore.. They only work when I add "min-h-screen" (min-height: 100vh; normal css) on my main element.

BTW I did not make those animations I copied them from examples I found for a quick demo.

Thank you.

 

 

**EDIT:

I have found how to target a container scroll I had to use "scroller:".
Now the problem is that the scroll is somehow "buggy" sometimes, especially when I scroll back up the container is tweaking and unpinning from top/bottom

See the Pen QWdeKRy by akc4 (@akc4) on CodePen

Edited May 3, 2021 by qlpo
fixed one issue now I have a problem with the container.

[GreenSock]

7 hours ago, qlpo said:

**EDIT:

I have found how to target a container scroll I had to use "scroller:".
Now the problem is that the scroll is somehow "buggy" sometimes, especially when I scroll back up the container is tweaking and unpinning from top/bottom

I'm not clear on exactly what you're asking here - would you mind providing the most minimal demo possible (strip out everything you possibly can, only leaving the essentials to show the issue at hand)? I didn't notice any strange "buggy" behavior or unpinning, etc., but I'm sure I'm just misunderstanding something. We'd love to help with any GSAP-specific questions. 

[qlpo]

9 hours ago, GreenSock said:

I'm not clear on exactly what you're asking here - would you mind providing the most minimal demo possible (strip out everything you possibly can, only leaving the essentials to show the issue at hand)? I didn't notice any strange "buggy" behavior or unpinning, etc., but I'm sure I'm just misunderstanding something. We'd love to help with any GSAP-specific questions. 

Thank you for your reply,

I have recorded the example I made in codepen: 

For some reason, the transition is not smooth on a bigger screen when I set the scroller to my container.

[qlpo]

Another example of the "jumpiness" between animated sections when the "scroller:" is set to a div rather than the body.
Here, I used the pre-made template from 

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

And here is the codepen with the "jumpiness" between animated sections:

See the Pen qBReGpQ by akc4 (@akc4) on CodePen

[GreenSock]

Okay, I can see the behavior in Safari, and it's because the browser is not synchronizing the handling of the scrolling and the JS main thread. Most browsers only do that on the main window/body. So when you scroll, the browser instantly renders the content in that new position, THEN the JS runs and makes the necessary adjustment to make it appear fixed, so you see a judder. I am not aware of any way to force the browser to keep those things synchronized. If anyone else does, I'm all ears. 

 

The only solution I can think of is to set pinType: "fixed" which will fix the juddering, but it introduces a new problem - the stacking context. Since you've got a position: fixed element inside a scrolling <div>, the fixed element appears on "top" and obscures pointer/wheel events. In your scenario, you've got things set up in a stacking order that makes it pretty awkward and I don't have time to weed through all your elements/layout/css and find an alternate solution. But you could use some JS to basically make the wheel events act as though they're passing through to the scroller ancestor:

// if you can't just set pointer-events: none (because you need to be able to click on things, for example), you could apply this JavaScript to basically make the mouse wheel events pass through to the scroller:
ScrollTrigger.getAll().forEach(st => {
  const multipliers = [1, 15, 0.03]; // pixel, line, page
  if (st.pin && st.scroller !== window) {
    st.pin.addEventListener("wheel", e => {
			st.scroller.scrollTop += e.deltaY * multipliers[e.deltaMode];
			e.stopPropagation();
			e.preventDefault();
    });
  }
});

You'd put that at the END of all your code (after you created all your ScrollTriggers) because it loops through them all and does the necessary setup on those. 

 

Here's a fork: 

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

 

Again, this isn't a bug in ScrollTrigger or anything - it's a fundamental problem with the way browsers handle scrolling and JS on different threads, plus the stacking context and event issues inherent in your setup. 

 

Does that help? 

[qlpo]

Thank you very much @GreenSock