ScrollTrigger not working without Markers

[fernandocomet]

I working on a React environment.

 

My demo is here:

https://codesandbox.io/s/trial-svg-rubn8y

 

If I remove markers on ScrollTrigger my animation is not working.

 

On line 400 if I comment this line:

markers: true

My demo does not work.

 

Not sure it is related to ScrollTrigger or my styles

Any help is welcome

See the Pen App.js:9723-9740 by s (@s) on CodePen

[akapowl]

Hello Fernando,

 

you will need to specifically set pinSpacing to true on that ScrollTrigger because the parent of the element you are pinning has display: flex set. When that is the case, there will be no pinSpacing applied by ScrollTrigger by default.

 

From the docs on pinSpacing - the important part here is bold. Happy scrolling!

 

https://codesandbox.io/s/orkndq?file=/src/App.js

 

pinSpacing

Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". 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.

[fernandocomet]

Thanks a lot @akapowl

 

I am using Flex in all my demos 🤦🏻🤦‍♀️