scrolltrigger How to fix width in section? ScrollTrigger

[Roman S.]

 

I need the pin spacer to accurately determine the width of the container, which is about 5200px. The problem is the wrong distribution of the width, how to fix it?

The photo shows how it should be:

 

See the Pen oNPogej by 1kiritos1 (@1kiritos1) on CodePen.

[GSAP Helper]

Hm, I read your question a few times and I still don't understand. Even if I completely delete all ScrollTrigger code (all JavaScript in fact) in your demo, it looks nothing like your screenshot. Are you asking about something related to GSAP/ScrollTrigger or are you asking more of a "how do I style this in CSS" kind of question? 

 

Here are some tips that will increase your chance of getting a solid answer: be sure to include...

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo that clearly illustrates the issue

 

[Roman S.]

GSAP Helper Yes, I also tried deleting the js code, but it remains the same. It's a matter of styles, I need to correctly set the width for the container (.reviews__inner) or parent ( .reviews ). You likely won't answer the question regarding only styling, so thank you for the tips!

[mvaneijgen]

Hi @Roman S. is you're issue that your elements are not obeying the width you've set? That is because flexbox is trying to 'help', flexbox will automatically distribute the elements over the width you've given it. You can overwrite that using the flex-grow, flex-shrink and flex-basis property or the short hand flex: 0 0 "your width". You're right that this is a CSS issue and we like to focus these forums to just GSAP related questions. Still hope it helps and happy tweening! 

 

See the Pen GRXOvgo?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen.

[Roman S.]

Thank you!