React Scroll Magic SectionWipes causing unwanted padding, how to remove it?

Question

I am trying to implement the same scroll component as here: https://bitworking.github.io/react-scrollmagic/section-wipes

The code for this component is provided by the github repo itself: https://github.com/bitworking/react-scrollmagic/blob/master/example/src/components/ScrollMagicExamples/SectionWipes2.js

But if you try to to integrate this component into a page it created huge amount of bottom padding that's of course is unwanted since there is other components above it and below it. The problem is i want to remove this padding and i am not finding a solution.

the only thing that kinda worked in disabling the padding-bottom from the browser dev tools and it worked but i am not able to access the class defined by this component since it doesn't accept any classes. If i try to assign a custom class to the controller the whole component won't work anymore.

unwanted padding

If someone can take a quick look and try to solve it you will help a lot, the code is there just put it as a separate component and test it

Answer 1

You can remove the padding by adding these lines of CSS:

.scrollmagic-pin-spacer
{
    padding-top:0 !important;
    padding-bottom:0 !important;
}