Issues with ScrollTrigger in pinned panels

[acolyte]

Hello there,

 

I'm trying to add Scrolltriggers inside the first of three pinned panels that is longuer than the viewport. Unfortunately, it seems that the further the element is from the top of the pannel, the greater the trigger's offset is.

 

I tried playing with the order of my animations, using refresh() and sort(). No luck.

 

In this CodePen, there are multiple text elements with the same selector. If you remove the JS for the pinned panels (and edit some css), the triggers work as intended.

 

Does anyone have an idea how to properly assign the triggers inside these panels?

See the Pen NWYbpXo by misterawesome (@misterawesome) on CodePen

[GreenSock]

Welcome to the forums, @acolyte. 

 

I noticed several problems:

1. You're animating the very thing(s) you're using as triggers on the y-axis which will of course throw off the calculated start/end scroll positions. 
2. You're also pinning the container without specifying pinnedContainer in the children's ScrollTriggers. 

I'm trying to understand your intent here - why pin and also animate the yPercent? Are you trying to make the background stay while the rest appears to scroll normally? Once we understand your goal, perhaps we can suggest a better, cleaner approach.

[acolyte]

Good morning Jack,

 

The page's main content will be in the first white section. Its height needs to be fluid as it may contain many elements. 

 

The first goal is to reveal the following pinned panels (blue then black) just like this pen. Here's an inspiration (see the footer at the bottom).

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

 

I also plan on animating different elements inside the main section using ScrollTrigger (like this data-fade).

 

It may be because I am a newbie to GSAP, but i find the ScrollTrigger's doc to be somewhat lacking. I find no referrence to this pinnedContainer you are referring. I found it mentionned in the Cheatsheet, but without explaination on what it does exactly.

 

Thank you for your time.

[Cassie]

Hi there!

 

I just did a quick search of the ScrollTrigger docs (CMD + F)
 

pinnedContainer

Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)

[acolyte]

2 hours ago, Cassie said:

Hi there!

 

I just did a quick search of the ScrollTrigger docs (CMD + F)
 

pinnedContainer

Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)

 

Hi Cassie, thank you for your response!

 

My bad, i was trying to use the search input. I guess it just searches in the title.

 

[acolyte]

Also, I have updated the CodePen to use pinnedContainer with its parent pinned panel but this doesn't seem to solve my issue.

[GreenSock]

You don't need to pin that container at all. This is mostly about your setup, markup, and CSS. 

 

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

 

Is that what you're looking for? 

[Cassie]

4 hours ago, acolyte said:

Hi Cassie, thank you for your response!

 

My bad, i was trying to use the search input. I guess it just searches in the title.

That's really helpful feedback - thank you!

[acolyte]

On 7/15/2022 at 5:26 PM, GreenSock said:

You don't need to pin that container at all. This is mostly about your setup, markup, and CSS. 

 

 

 

 

Is that what you're looking for? 

 

This is exactly what I am looking for!

 

I'll try to use this as a foundation for my main layout.

 

Thank you very much. I hope I was not too much of a burden.

 

[GreenSock]

1 hour ago, acolyte said:

Thank you very much. I hope I was not too much of a burden.

 

No problem. Very happy to hear it helped. And yeah, thinking through the HTML structure, CSS rules, and logic is typically the toughest part. 

 

Enjoy!