Overview
Vertical Scroll Sections turns a stack of full-screen panels into a fullpage.js-style scroll experience: each panel snaps into view as the visitor scrolls, swipes, or uses the keyboard. Every panel is rendered from a bound Tiger Section template (or an Elementor Library template), so you design the panels with the full builder and the widget handles the snap-scroll, navigation and motion.
Key features
- Template-bound panels — point each section at a Tiger Section template or an Elementor Library template.
- Snap navigation — mouse wheel, keyboard (↑/↓, Page Up/Down, Home/End), touch swipe, and an on-screen dots rail with optional per-section labels.
- Motion — slide or fade transitions, adjustable speed, autoplay with pause-on-interaction, and an infinite (wrap-around) option.
- Direction — full-height vertical panels by default, powered by the bundled Tiger Swiper engine (isolated so it never clashes with the theme).
Setting it up
- Create one Section template per panel (Templates → Add New → set type to Section), or use existing Elementor Library templates.
- Add the Vertical Scroll Sections widget to a full-width, canvas-style page.
- Under Content → Sections, add a row per panel and pick its template.
- Tune the Scroll & Motion and Navigation sections (dots, arrows, autoplay, effect).
- Style the section height, dots rail and arrows on the Style tab.
Tips
- Set an Anchor ID on a section to deep-link straight to it (e.g.
#pricing). - Use a shorter section height (e.g. 70–80vh) when panels sit inside a normal page rather than a dedicated landing page.
- Infinite mode uses a wrap-around (rewind) so it never freezes on template content.
Transition effects
Under Content → Scroll & Motion → Transition Effect, choose how one panel gives way to the next:
- Slide — the classic vertical push. Clean and fast.
- Fade — panels cross-fade in place.
- Parallax (content drifts) — panels slide while each one’s content drifts at its own rate, giving real depth. Set how far with Parallax Depth (a negative value reverses the direction). This works on your own section templates automatically — no special markup needed.
- Cover (next slides over) — the outgoing panel eases back and dims while the next slides over the top.
- Zoom — panels scale and fade through one another.
- Flip (3D tilt) — panels tilt away on the X axis as they leave.
Note: this “Parallax” is a transition effect for this widget’s panels. It is separate from the site-wide Parallax module on the Advanced tab, which you can still apply to any element (including elements inside a panel) — the two don’t clash.
Making it feel smooth
- Easing — the acceleration curve of each change, and the single biggest lever on how smooth the scroll feels. Smooth is the recommended default; Springy adds a little overshoot; Linear is mechanical.
- Transition Speed — how long a change takes (ms).
- Wheel Sensitivity — lower means a more deliberate gesture is needed before it moves on (calmer); higher is snappier.
Don’t trap your visitors
Release Scroll At Edges (on by default) hands the mouse wheel back to the page once the visitor reaches the first or last panel, so an embedded block never traps them. Only switch it off when the widget is the whole page and you want a true full-page experience.
Keyboard navigation (↑/↓, Page Up/Down, Home/End) and touch swipe work throughout, and each panel can carry an Anchor ID so you can deep-link straight to it.
Availability
Vertical Scroll Sections is a Pro widget. Enable or disable it under Tiger Elements → Widgets.