ビューポートコントロールは、スクロール効果のビューポートの開始点と終了点を定義できるデュアルスライダーコントロールです。
ビューポートとは、Webページのユーザーが見える領域のことです。この表示領域の大きさはデバイスによって異なります。
下方向にスクロールすると、各要素は画面の下部にあるビューポートに入ります。最初にビューポートの下から要素が表示されたときは、下からのパーセンテージが 0 であることを示しています。さらにスクロールしていくと、ビューポート内の割合が変化します。要素の垂直方向の中央がビューポートの中央にある場合、その割合は50%になります。
ビューポートコントロールが 0 Bottom（下） と 100 Top（上） に設定されている場合、要素が最初に画面の下部でユーザーのビューポートに入ったときに動きが始まり、要素がビューポートを出ると動きが止まります。
下30、上65に設定すると、要素がビューポートに入って30%に達した時点でモーションが開始され、65%に達した時点で終了します。
トランスペアレンシー > フェードアウトインのようなモーションエフェクトを使用する場合、エフェクトは 0% で完全に表示され、エレメントがビューポートの 30% に達するとフェードアウトし始め、65% に達すると完全に非表示になり、ビューポートの 65% でフェードインし始め、ビューポートを抜けるときに完全に表示されるようになるまでフェードインします。
フェードインアウトはその逆になります。要素が最初にビューポートに0%で入ると、それは非表示になります。要素がビューポートの30%に達すると、フェードインし始め、65%で最大視認性に達するまで、どんどん見えてきます。65%になるとフェードアウトし始め、ビューポートを出る頃には完全に隠れてしまいます。