Jump to content
Search Community

ScrollTrigger pin is pinning higher then its suppose to causing the pin to block the content before it

PakoVince

Go to solution Solved by Sahil,

Recommended Posts

Posted

Hello Everyone. I am new to GSAP and have been trying to work with scrollTrigger for a bit now and I am completely lost on this issue. I am using HTML, SCSS, and JS (As you can see from my codepen). What I am trying to do is fairly simple and I am surprised it is causing me this much pain but I simply want to pin the rebuilding_country once the top of the viewheight of the window hits the top of the .rebuilding_country div. I feel like my gsap scrollTrigger is correct and this may be purely a SCSS issue I am encountering as I am also new to that. However, when I comment out all of my scss it still has this same issue. It is especially bad on mobile. On desktop 1920 1080 it works pretty much as expected. 

So now that I have stated what I am trying to accomplish lets look at what's going wrong. For some reason as the screens get smaller the start of the pin trigger moves higher and higher even though when hovering over the divs with devtools the rebuilding_country div is still below all of the content that comes before it in the HTML structure. So why is the start marker near the top of the entire rebuilding section while my screen gets smaller is my issue and where I am lost.

I hope this was clear and I want to reiterate I am using SCSS. Thanks in advance.

See the Pen vYqLEEy by calebluster (@calebluster) on CodePen.

  • Solution
Posted

Your issues are related to CSS only and can be seen without using gsap. Main issue is that you are setting `.building_hope-wrapper` position to absolute, it takes the content out of document flow and it overlaps next section. Maybe you can set position absolute on `.wheel` instead. Second issue is that you are setting height of `.building_hope` to 100vh, so it also can cause content to overflow. Another issue is that you are setting align-items to center on `.building_hope`.  Overall the issue has nothing to do with gsap and you need to fix your layout to solve it.

See the Pen yLdOREN by SahilAFX (@SahilAFX) on CodePen.

  • Like 2
Posted

@Sahil Thank you so much. I was afraid it might be something SCSS related. I appreciate the time you took to solve this and help with this! I hope you have a great rest of your day!

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...