Revealed panels between sections

[mattdown]

Hi,

Just making the changeover to ScrollTrigger from Scrollmagic so I'm a bit late to the party but really impressed with it so far.

I've come up with this layout which kinda achieves what I want it to by having a few normal scrolling page sections and then a few sections which reveal as the user reaches them followed by another normal section and footer to finish off the page layout.

My example relies on specifying a margin:200vh to the '.last-scrolling-section' section which seems to work OK but I was wondering whether this could be created in a more sustainable way by getting ScrollTrigger to work out what that amount should be, just in case another 'reveal-section' gets added to the layout in the future. The z-index for these are also specified in the CSS whereas it would be good to let Scrolltrigger calculate these somehow.

Also, in the Codepen, you can see that I've attempted to pin the orange section for the duration of one viewport height scroll length. This seemed to break the reveal sections, probably due to the bottom margin of the '.last-scrolling-section'. How could I integrate the pinning of the orange section (or any future additional normal scrolling sections) without it breaking the reveal functionality?

Thanks in advance for any suggestions or assistance.
Matt

See the Pen oNLrmRK by mattdown2478910 (@mattdown2478910) on CodePen

[ZachSaucier]

Hey Matt. That's an interesting way to approach the situation. The more conventional way to approach this sort of situation is to do it like this demo (listed in the ScrollTrigger demos page). Using ScrollTrigger to create the proper offset instead of CSS margin will likely fix your secondary issue about the orange section as well. Keep in mind that you should create ScrollTriggers in the order in which they are reached when scrolling. Not doing so is one of the most common ScrollTrigger mistakes.