Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jedifunk

ScrollTrigger heights when unpinning

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 post
Share on other sites

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 post
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 post
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 yLOrRdo by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to post
Share on other sites

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

×