1. What it does:
Viewport Control in Elementor sets when scroll-based effects start and stop based on how far an element has entered the visible screen (viewport).
2. How viewport is measured:
0% = Element just enters screen from bottom.
50% = Element’s center is at the center of the screen.
100% = Element is fully past the top of the screen.
3. Control sliders:
Two sliders: Start (Bottom %) and End (Top %) define effect range.
Example:
0–100% → effect spans full visibility.
30–65% → effect starts after 30% is visible, ends at 65%.
4. Example effects:
Fade Out In:
Visible at 0%, fades out from 30%, invisible at 65%, fades back in until exit.
Fade In Out:
Hidden at 0%, fades in from 30%, fully visible at 65%, fades out till exit.
5. Use Cases:
Animate only when user sees key parts (stats, images, headers).
Useful for storytelling scrolls, parallax, hero intros.
6. Tips:
Use tight ranges (e.g. 40–60%) for focused effects.
Combine scroll + opacity or motion for depth.
Always test across mobile and desktop.
7. Supported effects:
Fade, Slide, Scale, Rotate, Skew, Sticky, Blur, Transparency.
