My other sections are getting overlapped by the pinned section in matchMedia viewports

[Mohit Pain]

Hello everyone,

I'm new to GSAP and am trying to learn it. I have created a pen where I'm using GSAP ScrollTrigger to animate my site. Everything works fine on a big viewport, but when it comes to mobile or tablet viewports, my sections get overlapped with each other. Why does this happen? I can understand that if I apply pinSpacing=false, then the bottom section should start overlapping the pinned section. But here, I didn't apply any pinSpacing at all, so why does my content get hidden under other sections?

 

what i want is that when scroll of first section/div completed then only second section should come to view one by one.

 

Please help me solve this error because I have to complete the whole project for my company, and I'm facing a lot of stress because of this. This only happens when I switch to mobile or tablet viewports.

See the Pen LYoxrEO?editors=0110 by Mohit-Mishra-the-styleful (@Mohit-Mishra-the-styleful) on CodePen

[mvaneijgen]

I've resized my browser multiple ways, but I cant anything going wrong. Do you maybe have a screenshot or screen recording of the issue you're seeing?

 

What I would recommend is wrapping all the GSAP code in a .matchMedia() function and have it setup so that only one of the setups can be active at a time, if you do the matchMedia function will do all the clean up for you so that you don't have to worry about it. Hope it helps and happy tweening! 

 

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

 

[Mohit Pain]

Sir, you have added two matchMedia queries for different screen sizes, and I can see that this has solved my problem. However, what I did was create a single matchMedia query only for the mobile screen and one global  tl. When you view the page on a mobile screen, you will see that my pink section moves under the first top section, and the third section also starts overlapping behind the first section. You will notice my problem when you do not add multiple matchMedia queries for different screens just run my code same as it is, dont change the code and you will find my problem.

 

blue is my 1st section

pink is my 2nd section

green is my 3rd section

 

i think your 1st reply have solved my problem here, i will see that it will work on my main project or not .. but i want to understand why my code is not working ...

 

[mvaneijgen]

1 hour ago, Mohit Pain said:

When you view the page on a mobile screen, you will see that my pink section moves under the first top section, and the third section also starts overlapping behind the first section. You will notice my problem when you do not add multiple matchMedia queries for different screens just run my code same as it is, dont change the code and you will find my problem.

Yeah, that is the issue. I don't see this happening.

 

1 hour ago, Mohit Pain said:

you have added two matchMedia queries for different screen sizes, and I can see that this has solved my problem. However, what I did was create a single matchMedia query only for the mobile screen and one global  tl

You have to timelines/ScrollTrigger that target the same elements you'll need to do a lot op cleanup for the first one to make it work again. That is why wrapping it in another match media fixes the issue, this does all the clean up for you and will make it that no to ScrollTrigger can be active at a time.