Vertical Panelling Pinned Until Content

[Heimes57]

I'm very new to GSAP and ScrollMagic and very eager to learn as much as possible on my own. But I'm struggling to grasp all the options and abilities while rushing to meet a project deadline! I appreciate the help!

 

What I'm trying to do is have four opening elements panel (or stack) until the last has been shown for the same duration as the others. Then as it's unpinned, the page content pushes it up and scrolls normally. 

 

I need a duration of at least 200% because I plan on having timelines in each panel animate elements during that duration. 

 

What I have now doesn't pin the last of the four elements and because of the absolute positioning, there is a 300% gap between the 4th element and the content.

 

There may be a much better way than I'm trying here. In fact, I'm positive there has to be a better way. 

See the Pen goNjwq by CairnDM (@CairnDM) on CodePen

[Visual-Q]

Since all your elements appear to set using vh and should scale responsively I think you should be able to apply an appropriate negative top margin in vh to the content to place it just below the last panel.

 

I'm not too familiar with scrollMajic so perhaps someone else can suggest a better layout option.

 

 

 

 

[Visual-Q]

It's pretty hackish way to do it but this floats content above absolutely then detects document scroll position when last item passes bottom of screen and sets content below it.

 

Kind of horrible the way scrollMajic handled this sort of thing wrapping everything in that container.

 

Note that this will only calculate once and be screwed up if screen is resized. A better way would be to reverse engineer this value and figure out what the height is represented is vh units and set it that way. Since the scrollmajic container is building it's height based elements you set in vh units it should theoretically be consistent when the screen is resized. I'll leave it to you to figure out the math.

 

See the Pen BJXaOB by Visual-Q (@Visual-Q) on CodePen

 

[Visual-Q]

I updated the pen now it detects directly based on final objects bottom position , I should have thought of this the first time around but it was a long day.

 

With this I was able to add window resize handler that will maintain the contents position relative the last item. Appears to work reliably now. 

 

UPDATE: this is a prickly one.. so i had to add another line of detection because it could fail to calcualte position on resize if the bottom item was out of view or hadn't yet scrolled passed trigger. It detects it's position relative to window bottom and hides the content until it once again passes trigger point... which then had to be wrapped in a timeout to give Scroll Majic time rebuild it's container first. 

 

It was an interesting problem to solve but I think the lesson here is that this could be layed out better. Probably the best way to do this would be to have the slides inside a container with overflow hidden. This would almost certainly break Scroll Majic however and require adjusting the way the scrolling functionality is handled. 

 

Alternately the content could reside with the Scroll Majic wrapper as well which is probably the easiest solution but that would mean ScrollMajic has scroll jacked the entire page which may be undesirable.

 

Maybe there's someone here who's  more knowledgeable about how to apply Scroll Majic to avoid these pitfalls. 

 

See the Pen BJXaOB by Visual-Q (@Visual-Q) on CodePen