Jump to content
GreenSock

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

Second ScrollTrigger animation start does not start at intended point + white space created by pin spacer

Recommended Posts

Hi everyone!

 

I've got 2 issues:

1. The second ScrollTrigger animation on my page (the purple section) has their markers off. Although it is set to start "top 0" it starts way below.

2. The second animation has lots of white space underneath it created by the pin spacer. Is there a way to hide that scroll space?

 

Thanks so much! 

See the Pen porzpRo by lisaschumann (@lisaschumann) on CodePen

Link to comment
Share on other sites

Hey there @animationmagic

 

  1. By disabling the first ScrollTrigger onLeave and thus removing the pinSpacer, you are changing the height of the document and since that second ScrollTrigger's start will be set when the pinSpacer of the first ScrollTrigger is still there, you would actually have to call a ScrollTrigger.refresh() after disabling the first ScrollTrigger, so the start of the second ScrollTrigger can be set again to its now correct value.
     
  2. Usually you'll just want to wrap all your content inside a wrapper and pin that wrapper if you don't want any pin-spacing to be visible in cases as such. Now in your scenario with the first ScrollTrigger that is being disabled onLeave things will be sort of tricky if you wrapped all the content, so I'd suggest just wrapping the portion of content after that first section you are pinning individually before in a wrapper and pin that.

    Something like this:

See the Pen 8c708012c35eff9fc01c5b89265d7a0d by akapowl (@akapowl) on CodePen

 

 

 

Please note though, that if you will add any subsequent ScrollTriggers on elements inside that .second-pin wrap, you will likely have to specify that wrap within the pinnedContainer property on those subsequent ScrollTriggers, as they can not take any pinSpacing into account because they will be within that wrap. I hope that's helpful, happy scrolling!

 

 

  • Like 4
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.
×