Jump to content
Search Community

ScrollTrigger heights when unpinning

jedifunk test
Moderator Tag

Recommended Posts

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

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

 

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

 

  • Like 3
Link to comment
Share on other sites

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...