Issue with pinned section

[Glenda Negron]

Hi, I am a beginner with GSAP and I need some help troubleshooting issues with my code. I am trying to accomplish a seamless transition between sections where section 1 starts fading out and section 2 starts fading in, in the same place. Right now this is working, but when the ScrollTrigger ends there is a jump and the 2nd section gets reset to not be position fixed which is what I want to allow the user to keep scrolling if there is more content down the page. However, the transform property that gets applied causes the section to have white spacing at the top. What can I do to avoid the jump and the white spacing? 

Is there a better way to achieve the kind of layered feel that I am trying to get with the sections?

See the Pen XWyRzBy by Glenda-Negron (@Glenda-Negron) on CodePen

[Rodrigo]

Hi @Glenda Negron and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock!

 

I think the issue here is that your second ScrollTrigger instance is getting in the way. Here is a fork of your codepen without that instance:

See the Pen xxQdWBo by GreenSock (@GreenSock) on CodePen

 

Also as you can see there is some white space there as well, that's basically the document's background becoming visible. You can give the body the same background color you're giving the other section in order to prevent that

 

This is not helping as well IMHO:

onUpdate: (self) => {
  // Adjust the autoAlpha of section 1 based on the scroll position
  hero.style.visibility = self.progress === 0.5 ? "hidden" : "visible";
  hero.style.zIndex = self.progress === 1 ? "-5" : "5";

  // Adjust the autoAlpha of section 2 based on the scroll position
  boxIntro.style.opacity = self.progress === 0.5 ? 0 : 1;
  boxIntro.style.zIndex = self.progress === 1 ? "4" : "4";
}

That is extremely wasteful since you're updating those styles on every update from that ScrollTrigger instance. If you want to do something at the end of the ScrollTrigger instance (progress = 1) then just add a set() instance at the end of the timeline that does that. Same with the other condition, just add a set() instance midway through the timeline.

 

Finally I think that there are better ways to achieve this, maybe pin the second section while still transparent and then animate it's opacity and visibility using autoAlpha. Unfortunately I don't have time now to create an example that works the way you intend.

 

One last thing, you are using some CSS transitions in some of your elements, if for some reason you try to animate the same property with GSAP you'll get unexpected results, because any time GSAP updates the specific property for that element CSS will also try to animate said property.

 

Hopefully this helps getting you started.

Happy Tweening!

[Glenda Negron]

Thank you @Rodrigo, I will implement your suggestions, maybe even try a different approach to this.