How to make ScrollTrigger not push page content up

[Daniel Drummond]

Hi guys,

 

I created this carousel that is controlled by the scroll and it is working as I intend. There's only one bug I need to fix.

As you can see, when we scroll, it's pushing the contents from the top of the carousel up, leaving a blank space.

And I want it to stay in the same place.

 

How can I fix this bug, will it be my css? Can you help me?

 

Thanks all!!!

See the Pen wvrppqd?editors=1000 by drummond-dev (@drummond-dev) on CodePen

[Daniel Drummond]

Hi guys again.

 

I made a change to the start and found that the same happens with the content below the carousel.

All content below the carousel is pushed down, leaving a blank space as well, I want to limit the effect to only within the carousel area

[GreenSock]

You had invalid markup (at least one extra </div>). You should definitely check that. But if you just want to pin the WHOLE thing (all content on the page), you should wrap it in a container <div> and pin THAT, like pin: "#wrapper". 

 

See the Pen MWErQbd?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Be careful about collapsing margins too. I put a 1px transparent border-top on the wrapper to prevent the collapsing margins you have in there, but you may need to tweak your CSS accordingly. 

 

Does that help? 

[Daniel Drummond]

Hi @GreenSock,

 

thank you so much for the help. Now I noticed another problem that is happening due to the carousel.

I have other animations on the page, like a parallax and icon animations and a counter.

And due to the carousel (its height) when I get to other animations they've already happened.

I will create a new pen to demonstrate the full page.

 

Thanks again