Skip to main content




the Viewport control is a double slider that allows you to define the start and end points of the viewport for scrolling effects.

The viewport is the user visible area of a web page. This visible area varies in size depending on the device.

By scrolling down, each item enters the graphics window at the bottom of the screen. When an item first appears from the bottom of the viewport, that represents 0 percent from the bottom. As you scroll further into the view, the percentage of your place in the viewport changes. When the vertical center of the element is in the center of the viewport, it is at the 50%.

If he Viewport The control is set to 0 Bottom and 100 Top, then the movement will start when the item first enters the user window at the bottom of the screen, and will stop when the item leaves the window.

If set to 30 Lower and 65 Upper, the movement will start when the element has entered and reached the 30% of the viewport, and will end when it has reached the 65% of the viewport.

If you use a motion effect like Transparency > Cast in, the effect would be completely visible at 0%, it would start to fade when the element reaches 30% of the viewport, it would be completely invisible when it reaches 65% and then it would start to disappear at 65% of the viewport, until it reaches full visibility in the moment you exit the viewport.

Fade In Out it would be the opposite. When the element first enters the viewport at 0%, it will be hidden. When the item reaches 30% in the viewport, it will begin to fade, becoming increasingly visible until it reaches maximum visibility at 65%. At the 65%, it will begin to fade until it is completely hidden again when you exit the viewport.

R Marketing Digital