jedifunk Posted September 28, 2020 Share Posted September 28, 2020 So I'm wondering how to handle this situation, and i'm not sure if its the unique scenario of at play or if i'm missing something with ScrollTrigger. http://dev.yamamotoqa.com/proforce/ So my animation starts off pinned, and the pinned container is set to be 100vh and 100vw. The issue comes at the end when the container is unpinned, and the remaining content starts to be available. Couple of things happen: 1. if the browser height is too short, the first part of the unpinned content doesn't show or is cut off by the pinned container 2. at a mobile size the unpinned content ends up scrolling over top the pinned container Any help is very much appreciated! Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 28, 2020 Share Posted September 28, 2020 Hey jedifunk. It's really hard for us to debug a live site like this. Please make a minimal demo of the issue (we don't need to see your assets or the majority of your code) if you'd like our help debugging: Link to comment Share on other sites More sharing options...
jedifunk Posted September 28, 2020 Author Share Posted September 28, 2020 @ZachSaucier well, perhaps that's part of the problem too ... it seems fine when i make a codepen for it, and i'm wondering if its because of the images not being there. here's a codepen: https://cdpn.io/jedifunk/debug/poyBLea/LDkmdEYnaLZA edit: attached is an image for issue #1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 28, 2020 Share Posted September 28, 2020 6 minutes ago, jedifunk said: it seems fine when i make a codepen for it, and i'm wondering if its because of the images not being there. Perhaps you're initializing ScrollTrigger before the images have been loaded? If so you could Wait to initialize ScrollTrigger until all of the image have loaded or Refresh ScrollTrigger once the images have loaded or Give the images width and heights so that they take up the amount of space they will take so that they're sized correctly before they load. Link to comment Share on other sites More sharing options...
akapowl Posted September 28, 2020 Share Posted September 28, 2020 Seems that at some point your images are simply just higher in dimension, than your container is, so they overflow and thus hide the content that comes right after that pinned container. Adding an overflow: hidden to your #container seems to have resolved that issue for me. Is that better? See the Pen 3e2e65c08126a30f9334036ceb48fd83 by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
jedifunk Posted September 29, 2020 Author Share Posted September 29, 2020 @akapowl yes! I also just set the unpinned content to position:relative and that also seemed to help, although it would flow over top the image of the final pinned section sometimes. this might solve for that too. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now