The Viewport Control is a dual-slider control that lets you define viewport starting and ending points for scrolling effects.
The viewport is the user’s visible area of a web page. This visible area varies in size by device.
When scrolling down, each element enters the viewport at the bottom of the screen. When an element first comes into view from the bottom of the viewport, that represents 0 percentage from the bottom. As it scrolls more into view, the percentage of its place in the viewport changes. When the vertical middle of the element is in the center of the viewport, it is at 50%.
If the Viewport control is set at 0 Bottom and 100 Top, then the motion will begin when the element first enters the user’s viewport at the bottom of the screen, and will stop when the element exits the viewport.
If set to 30 Bottom and 65 Top, the motion will begin when the element has entered and reached 30% of the viewport, and will end when it has reached 65% of the viewport.
If using a motion effect such as Transparency > Fade Out In, the effect would be fully visible at 0%, would begin to fade out when the element reaches 30% of the viewport, would be fully invisible when it reaches 65%, and then would begin to fade back in at 65% of the viewport, until it reaches full visibility by the time it exits the viewport.
Fade In Out would be just the opposite. When the element first enters the viewport at 0%, it would be hidden. When the element reaches 30% of the viewport, it would begin to fade in, becoming more and more visible until it reaches maximum visibility at 65%. At 65% it will then begin to fade back out until it is completely hidden again by the time it leaves the viewport.