Conceptual question about pinning and elements that follow

[darkus]

This is a conceptual question, so hopefully the lack of sample code is OK here.  So far I've been using GSAP for 2 days and its SLICK and a game changer, I've got most everything working as  I wanted and its beautiful.  Setting most of my page up was an absolute breeze.

 

HOWEVER, I've run into a snag and was wondering if I'm approaching the problem in a correct or incorrect way.

 

I've pinned a div section, and within that pin section I have alot of animations going on within nested divs.   After the pin releases (after 1500px), then I continue to scroll down where there are more gsap animations happening.  The problem is the start points of all these subsequent animations are way off (about 1500px) because of the aformentioned pin.

 

So conceptually, what I came up with a solution is

1. I created a variable `var pinAmount = 1500`

2. In all subsequent animations, I add my pinAmount to whatever the original setting was: `start:pinAmount+300+" 75%",`

 

This is working, but as I add more and more animations below the pin, the code/timing is getting ever mode complex and its really hard to keep track of where everything is.  I'm now spending alot of time debugging the start and end positions for everything below the pin.  GSAP setup for everything above the pin was an absolute breeze, because I could base everything off the relative start and end of a container.  Adding a second pin will be a complete nightmare at this point.

 

The ultimate question is: Am I doing this correctly?  Am I supposed to just keep track of pin heights programmatically and then account for them in subsequent GSAP animations, or is there a much smarter way where GSAP can realize where everything is relative to the pin-releasepin?   I'm hoping there is a smarter way... 

 

[darkus]

Ok nevermind,

 

I've answered my own question. 

 

Conceptually what I was doing was WRONG.

 

I had to do all those workarounds because I had set a pinnedContainer and set the pin itself to a defined container.  By simply chaning pin to true, then everything is lining up correctly and problems are solved