Some questions about height and the scroll snap type functionality

[tlarsh3]

Hello,
First and foremost I wanted to say the pushin.js is a very cool project. My client and other developers love the vertical scroll and changing of the layers. I will admit I am very fresh when it comes to javascript but trying my best to navigate the functionality. I was hoping one of my freelance JS developers would be able to assist but hes swamped so i am a bit on my own.

Here is my current dev site with a culmination of FPO and a mixture of real content as well:
https://faygorevolustg.wpengine.com/

Anyway I planning to use 4 instances of pushin.js on my homepage, i am also using this in conjunction with wordpress and elementor page builder. The first one being just a video with the zoom in as you scroll until it "scroll snaps" into the next section. then further down the page i have 3 in a row which are all very similar where as you scroll it changes between three pictures and then scroll snaps into the next section with the next one.

A few hurdles i am running into is setting the container height so there isn't tons of top and bottom space between my sections, so i am attempting to wrap each of the pushin sections in divs with height: 100vh and overflow hidden (my first one being id=hero) that way i can control or get close to controlling the height or the pushin container ends up with quite a bit of space before the next section, and because our sections have background colors its a little more obvious. Although i question my approach as i think this seems to impact the scroll snap into the next section. I have also trying to understand the array for the "pushin to" and why i may or may not need the two values. Lastly i am trying to initiate the debug mode, to hopefully help dial in the "data-pushin-from" so my layers animate correctly as you scroll the page.

Any help or guidance to make our pushin instances better or work as intended would be greatly appreciated.

Thank you,

Todd