section pin issue

[omi]

I want to make to show the content after the left side and right content move out of the view port on scroll and after that different content  should slide from middle of the blue box. but blue box should be pinned until timeline will get completed.

i don't know why pin is not working.  please do comment if anyone can debug the code.

 

Note: How i can set the dynamic end points so that sliding section will show under the blue box

See the Pen XWqOjBq by omi-bhatia (@omi-bhatia) on CodePen

[mvaneijgen]

There is something inside bootstrap that is breaking the pin in ScrollTrigger.  If I remove bootstrap from you CSS it works as expected. 

 

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

[akapowl]

 

Yup, @mvaneijgen is right, bootstrap is interfering with ScrollTrigger here.

 

You've got the class position-relative on the element that you are going to pin.

 

What bootstrap's CSS does with that class is this:

 

.position-relative{position:relative!important}

 

The !important in there will interfere with ScrollTrigger, as ST by default will set the element you're pinning to position: fixed inline, but since there is an !important in that CSS rule, this rule will make sure, that the position: relative will never get actually/properly changed - see the problem?

 

Since you set that element to position: relative in your custom CSS anyway, there is no actual need for you to put that bootstrap-class on there, just remove it and you should be better off.

 

Also as a sidenote:

 

You are setting...

 

html {
  scroll-bahavior: smooth
}

 

... which is bound to also interfere with ScrollTrigger ( or other scroll-related plug-ins ), so you might not want to use that.

 

Also, bootstrap will by default set the :root element to that scroll-behavior, so you might want to override that, too. Something like this, maybe:
 

:root {
  scroll-behavior: auto !important;
}

 

 

 

Hope that will help.

 

Scroll (and strap your boots) carefully!

 

See the Pen YzLBNoO by akapowl (@akapowl) on CodePen

 

[Rodrigo]

@mvaneijgen and @akapowl

 

Great catch guys!!!

 

A little message to Bootstrap:

 

 

It's mesmerizing that they keep using !important all over the place...