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! 🧡

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: 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: 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. 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.

Thank you for your reply @mvaneijgen! I appreciate your help 🧡 To be honest I don't think that this solves the problem. For example: I see in your codepen the scroll jumps when you scroll to the end. That is not desired behavior. 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: 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) 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: https://codepen.io/oharpr/pen/RwvdMzR. 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 🙏 🙌 😇

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: https://codepen.io/GreenSock/pen/zYeoqod 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

@OSUblake You said that it is not possible but I found site where vertical and horizontal scroll linked together so that I am able to scroll vertically or horizontally and achieve the same effect (on MacBook with touchpad). Link to the site: Site with vertical and horizontal scroll linked together . (Sorry if it is illegal to put links here. No ads; for technical purposes only) I have noticed some things: this page does not really has `scrollY` and it is always 0 there is GSAP installed there is no drag effect Do you have some ideas how to achieve the same effect using GSAP? Maybe some CodePen (code example)? Would really appreciate some example because that behaviour is much more user-friendly for totally horizontal pages. Thank you in advance.