Conflict gsap and Bootstrap

[Elia]

I have an issue with Bootstrap conflict with gsap. In short, if I try to create a container and a row to align the two columns, it doesn't work, the image disappears and everything gets messed up. For now I have fixed it like this to have it intact on the desktop version, but how can I get around this problem in the mobile version?

 

 

See the Pen wvNbJed by edalbe (@edalbe) on CodePen

[GSAP Helper]

Hm, vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Can you be more specific?

 

And what exactly is the problem on the mobile version? The demo you provided seems to work fine, but maybe I'm missing something.

 

Here are some tips that will increase your chance of getting a solid answer:

• 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 - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

[Elia]

Perfect. I fixed the code and tried to do as much cleanup as needed in my code. In the desktop version, as already mentioned, everything is fine. In the responsive version, I would like the first column, the one with the red background, to go above the parallax image. Now, it splits in half even in the responsive version and if I try to add containers to align them well in the mobile, the image disappears.

Check my codepen, it's been updated. Thanks so much again

[mvaneijgen]

Hi @Elia 

4 minutes ago, Elia said:

Now, it splits in half even in the responsive version and if I try to add containers to align them well in the mobile, the image disappears.

Do you have another version of this pen with the code that is breaking, so that we can compare the two and help you debug.

[Elia]

this is the first pen: 

See the Pen wvNbJed by edalbe (@edalbe) on CodePen

See in responsive mode. The red container is not in full col above the image, but it is divided in half with the image.

this is the second pen where I can insert container, where the alignment is correct, but the img disappear:  

See the Pen NWoVJvP by edalbe (@edalbe) on CodePen

[mvaneijgen]

I don't have much time right now, but I've disabled all JS and then there is also no image. So the issue is not in GSAP and means the CSS is breaking your setup. If I have time later today I'll see if I can help you debug, but hope it already steers you in the right direction. 

 

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

 

[mvaneijgen]

If an element has no content in it doesn't have a height. Giving it a background-image doesn't do anything, it will just set the background (the same as you if you would set a color)

 

Flexbox elements or at least how Bootstrap sets it up will make two elements in a .row equal heights. So to fix your issue you'll have to give you .section-parallax container a height (or min-height) on smaller screens. This has nothing to do with GSAP and we like to keep these forums focused to just GSAP questions, so please keep that in mind. 

 

You might want to look in to gsap.matchMedia() to change your ScrollTrigger setup on smaller screens, because the logic for large screens doesn't have the correct effect on smaller screens. But I'll trust that you'll figure that out. Hope it helps and happy tweening! 

 

See the Pen jOdoJeM?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen