Why 'display: flex' breaks the ScrollTrigger pinning and how to avoid?

[oharpr]

Hello GSAP Community!

 

I found that I very often have problems with GSAP ScrollTrigger when my layout fully consists of flex-items.

For example, I found that official demo: 

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

But it was really easy for me to 'break' it by adding just one simple CSS line 'display:flex;'

I just added div-wrapper, and made it 'display: flex;' - and the page don't longer scroll completely.

 

I use Framer for building websites and it almost fully consists of flexbox items. 

Can I read somewhere what caveats are when using gsap with flexbox?

Could you please explain how to make it work with flex elements?

 

Thanks

See the Pen yLZZZmo?default-tab=css,result by oharpr (@oharpr) on CodePen

[mvaneijgen]

I wouldn't see how flex would break the layout. I myself build websites all day using a lot of Flexbox and CSS grid all around and almost never have issues. Creating the correct layout with CSS, so that you can animate everything easily is really important, but if you got a firm grasp of CSS there will be nothing holding you back.

 

With the rebranding of GSAP a few months ago there has a lot happend and a lot of people are hard at work to get the demo's in the new branding and it seems like in this particular case the CSS that gets loaded with the branding (within the CSS settings tab on codepen) is causing a issue with your flex .wrapper

 

I've not done a deep dive on why that is, but I've just removed that CSS and add my own and with it everything just works! Hope it helps and happy tweening! 

 

See the Pen rNPRdQq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[oharpr]

Thank you for your reply @mvaneijgen! I appreciate your help 🧡

 

To be honest I don't think that this solves the problem.

For example:

1. I see in your codepen the scroll jumps when you scroll to the end. That is not desired behavior.
2. Why in my codepen everything works when I remove 'display: flex' but doesn't work with it? 

I don't think there is a problem with external CSS because of:

1. I have the same problem in the external website builder (Framer) where I cannot just simply remove 'broken' CSS (I don't have direct access to CSS)
2. I've just recreated the same codepen where I removed almost everything (including CSS, gsap-logo, etc) and the problem still exists, have a look: 

   See the Pen RwvdMzR by oharpr (@oharpr) on CodePen

   . Page will be scrollable fully only when you remove the line 'display: flex'.

I don't see any reason why this example works WITHOUT  'display: flex' but doesn't work WITH 'display: flex'.

By the way, scroll is not jumping as well when you remove 'display: flex'. There is definitely some problem there.

 

Do you (or someone) have any thoughts how to use ScrollTrigger correctly with flexbox? Maybe I miss some css-properties which are mandatory?

How 'display: flex' affects the animation?

 

Thanks again for your help 🙏 🙌 😇

[luisalbertom]

As outlined in the ScrollTrigger documentation, when the container employs 'display: flex', the 'pinSpacing' attribute defaults to 'false'. This default setting is intentional, as padding behavior is notably distinct within flexbox contexts. To address this, setting 'pinSpacing' to 'margin' is the recommended solution.

 

See the Pen OJdqodE by luis-lessrain (@luis-lessrain) on CodePen

[mvaneijgen]

Wow, @luisalbertom nice catch. I have probably read this, but never had to used it (https://gsap.com/docs/v3/Plugins/ScrollTrigger/)

Quote

Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations.

Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.

 

16 hours ago, oharpr said:

I see in your codepen the scroll jumps when you scroll to the end. That is not desired behavior.

My bad, I thought this was a feature of this particular effect. 

 

16 hours ago, oharpr said:

I don't have direct access to CSS

I have to say that CSS is really important when working with GSAP, so not having direct access can become an issue, there is of course multiple ways to get similar results, but my instinct always goes to changing the CSS before doing anything drastic with JS. Never used framer before, but seems weird that you can load custom Javascript, but can't load custom CSS?

 

Well hope the pen of @luisalbertom fixed your issue, good luck with the project and happy tweening!

[oharpr]

Wow, @luisalbertom, that's really impressive catch!

'pinSpacing' fully solves the problem! Thank you very much 🙏🧡

I marked your reply as a solution to this topic.

 

However I have more (specific/deep) questions:

12 hours ago, luisalbertom said:

padding behavior is notably distinct within flexbox contexts

1. What are exactly the differences in padding in flexbox? Can I read about it somewhere?

For example, I tried to use pinSpacing: 'padding' or pinSpacing: true and they both works. So I don't see any problems with padding in flexbox. What am I missing?

 

2. A quote from docs:

5 hours ago, mvaneijgen said:

Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.

Why pinSpacing: false is more desired than pinSpacing: 'margin'?

---

Thanks @mvaneijgen for your thoughts and advices! You are right, working on website without direct access to CSS is a little bit pain) But fortunately the layout in Framer is pretty good so I need to change things manually really rarely.

On 12/9/2023 at 6:00 PM, mvaneijgen said:

Creating the correct layout with CSS, so that you can animate everything easily is really important

Sometimes I don't understand what exactly is 'correct CSS layout' 😁)) For me everything looks good but I can't configure ScrollTrigger correctly, while I'm doing the same as in official demos.

 

One more time: thank you all for help! 🙏 Have a great evening.

[GreenSock]

4 hours ago, oharpr said:

1. What are exactly the differences in padding in flexbox? Can I read about it somewhere?

For example, I tried to use pinSpacing: 'padding' or pinSpacing: true and they both works. So I don't see any problems with padding in flexbox. What am I missing?

The default property for pinSpacing is padding, so it makes sense that pinSpacing: true and pinSpacing: "padding" would produce identical results. 

 

As for how things are different with flexbox, that's simply about the fact that browsers themselves measure things very differently inside Flexbox such that px aren't always px. For example, you could put 5 elements inside a Flexbox container that's 1000px wide, and try setting them each to be 500px wide but you'll see that it squishes them all to be much less than 500px. Same for padding - things can get rendered by the browser in a much different way than you might expect in terms of height/width based on fancy Flexbox calculations. 

 

4 hours ago, oharpr said:

Why pinSpacing: false is more desired than pinSpacing: 'margin'?

It's just what seemed more intuitive in more scenarios due to the explanation above about how widths/heights work inside Flexbox. You're welcome to use whichever settings work best in your scenario. 

 

4 hours ago, oharpr said:

One more time: thank you all for help! 🙏 Have a great evening.

💚

[oharpr]

Thanks @GreenSock, I got the idea. 🙏

 

Sorry for confusion, I meant that for me:pinSpacing:paddingandpinSpacing:margin -they work both even if my container is 'display: flex'.

 

But nevermind, I probably got the main idea. Thanks a lot! 🧡