ScrollTrigger layered pinning with variable heights

[bdepalmo]

Hello, I was hoping someone could point me in the right direction. I am trying to achieve a layered curtain effect where sections are pinned and then reveal the next section. My issue is I want to achieve this effect variable height sections. Height would be set by the content and not be limited to 100% or 100vh. In my included codepen I made the height of the first section 2000px and obviously the breaks as pinSpacing is set to false.

 

This site (https://www.elgato.com/en/wave-1) has an excellent example of what I am trying to achieve. If you scroll down to the "Get Amped Without Clipping" section.

See the Pen KKMgZYG by bdepalmo (@bdepalmo) on CodePen

[ZachSaucier]

Hey bdepalmo and welcome to the GreenSock forums.

 

So you just want to reveal the content from underneath the previous section? This demo shows how to do that:

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

 

To modify it to work for variable heights you can't use staggers. Instead you have to manage the ScrollTrigger start and ends manually based on the content height. Something like this:

See the Pen gOMwveK?editors=0010 by GreenSock (@GreenSock) on CodePen

[bdepalmo]

Zach, thank you for the reply it is much appreciated. Animating the Y axis position of each panel kills the ability to pin a fixed background image on each panel. I was hoping to have a panel pinned to the top with a background image, have the content scroll over it, and then reveal the next panel with the bg image no longer pinned and the sections moves out of view (repeating this for several sections).

[ZachSaucier]

Sounds like you need a second ScrollTrigger for each section (on top of what I have) that just pins the background image for the duration of time that you need it to be pinned. To do that you'll need to create an element just for the background image.

[Netty]

Hi Zach,

first of all to all developers and helping hands: thanks for the great work and the amazing animation library! I am new in doing animations with GSAP, but I am glad to found such a great tool.

But.... I have a problem with the Codepen above. I try to animate divs in the panels. And I want to do this for all panels. The animation is working fine with the simple fromTo-Animation (panel 2 and 3). But if I try to start the animation with a trigger (in the first panel), it is not working anymore. Even the markers are not visible. And I can´t find the problem. Target for all panels: I want the animations in the layer to be controlled with the scrub-function and have different animations. Can me help someone?

And another question for the animation project4: is it possible to set the x-value for the end position to x: 50%?  I tried Xpercent: 50, but without success.

THANK YOU!

 

Here is my Codepen

See the Pen gOozLvO by nettys (@nettys) on CodePen

[akapowl]

Hello @Netty

 

That is probably related to the ScrollTrigger in the code you are using having an eventListener attached, that kills ALL ScrollTriggers on refreshInit but only creates those in the sizePanels function from scratch afterwards.

 

ScrollTrigger.addEventListener("refreshInit", () => {
  // Kill off old ones
  ScrollTrigger.getAll().forEach(ST => ST.kill());
  
  // Create new ones
  sizePanels();
});

 

Since the extra ScrollTriggers you are creating there are not inside that function, they will not get re-created after they have been killed. So you might have to re-think the logic of your approach a bit there.

 

See how it works, if I add the creation of the ScrollTrigger (just the one that is supposed to be running after the blue section for simplicity) to that function instead

 

See the Pen popVeLo by akapowl (@akapowl) on CodePen

 

 

 

1 hour ago, Netty said:

And another question for the animation project4: is it possible to set the x-value for the end position to x: 50%?  I tried Xpercent: 50, but without success.

 

It would be xPercent instead of Xpercent. Maybe that's why it didn't work for you?

...or did you actually write it correctly but did not get the result you expected?   

 

Welcome to the GreenSock forums btw!

 

 

[Netty]

Hello akapowl,

thanks for your answer and sorry for the late response. to be honest, I don´t understand exactly, but I think I understand a few steps:  the position of the scrolltrigger in the function - needs to be beforekilling. That sounds good. ok. And I think, I need the 

Quote

panel.classList.contains('blue') && ....

for the triggerposition? Am I right?  I changed the trigger of all panels to the classes of the animated divs because of having 4 animations.

And I now put all the other animations in place and they work. For the animation in the first section I made a "first" panel with display: none. It works. But I think, it is not very elegant. Is there a better way?

And how can I manage, that the animation inside the panels first completes before scrolling down the panel itself? Or fix the animation in the middle of the viewport? Or at the top of the panel? I tried with pining the "project"-div. No chance. And I tried a timeline. But I think, theres is my problem with the right positioning of the timeline in the code.

 

See the Pen ExopGRx by nettys (@nettys) on CodePen

[Netty]

Ahhh. I forgot: the problem with the percent...solved..I wrote it wrong 🤪. Thank you

[akapowl]

 

That pen was actually not intended as a suggestion for a solution but more as a pointer towards what's the problem with your approach.

 

1 hour ago, Netty said:

For the animation in the first section I made a "first" panel with display: none. It works.

 

Well, if you got it working like that, it works. I wouldn't set it to display: none though but maybe visibility: hidden instead.

 

 

 

1 hour ago, Netty said:

And how can I manage, that the animation inside the panels first completes before scrolling down the panel itself?

 

You could even leverage that as a sort of 'cheasing' approach to that - without changing the logic too much and adding those invisible sections in between the others. Something like this

 

See the Pen qBpyvNM by akapowl (@akapowl) on CodePen

 

 

 

1 hour ago, Netty said:

But I think, it is not very elegant. Is there a better way?

 

I think you're not wrong about that and there sure is a better way - but you would have to change the logic of how the whole thing works depending on when to trigger what for that. I don't have the time to dig too deep into that, but something like this should work for starters.

 

The heightSoFar being increased by twice the panel's height (after all the ScrollTrigger stuff in the loop) and the trigger's starts and ends adjusted to that.

 

See the Pen WNdKWbX by akapowl (@akapowl) on CodePen

 

 

 

If  creating everything in loops like that is too much to grasp for you on the logic side of things, though (which for me it is at this moment), maybe try going a much simpler route by just creating the whole thing via one long timeline instead. That should be much simpler to understand.

 

I hope that will help a bit - good luck with the project and happy tweening!

 

See the Pen GRyBLWW by akapowl (@akapowl) on CodePen

 

 

 

[Netty]

Thanks a lot. I will try and learn!!!! Happy Day Today!

[jacopotaba]

how can i revert this solution for a section wipe from bottom to top like the example in ST demos 

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

? 

[GreenSock]

8 hours ago, jacopotaba said:

how can i revert this solution for a section wipe from bottom to top like the example in ST demos 

@jacopotaba Is this what you're looking for?: 

See the Pen KKpLdWW?editors=0010 by GreenSock (@GreenSock) on CodePen

[jacopotaba]

55 minutes ago, GreenSock said:

@jacopotaba Is this what you're looking for?: 

 

 

answered here, thank you @GreenSock