Smooth Scroll

How it works

Smooth scroll widget will automatically generate a smooth scroll on your pages.
There are two Smooth Scroll integrations available, integrating two well-known libraries: Lennisjs and GSAP ScrollSmoother. You can choose the one you prefer, as both of them has their own stuff described below.
There are other integrations out there like Locomotive Scroll but these two libraries are the only powerful ones that don’t generate scrolljacking.

Content tab

Settings group

Content at: determines the wrapper where the scrolling smooth has to be applied. In the case of GSAP ScrollSmoother integration, it is the main by default, and elements using fixed position have to be set outside “Content at”, like at the header or footer.
Disable at touch devices: if enabled, Smooth Scroll won’t be included at touch pointer devices.
Smooth: determines the smooth of the scroll.
Infinite scroll: only available at Lenis integration. It will continue scrolling from the top of the page when reaching the end of it.
GSAP easing: only available at GSAP ScrollSmoother integration. Will determine the easing of the scrolling. You can choose from a wide variety of easings. Learn more about GSAP easings here.

Scroll snap group

This is exclusive of Lenis. It is an integration of Lenis Scroll Snap plugin.
Lenis isn’t compatible with CSS Scroll Snap and this plugin integration will allow us to recreate the CSS Scroll Snap at Lenis.
To use the Scroll Snap set the attribute “scroll-snap-align” to the elements you want to target at their style tab. You can also customize the value: start, center or end.
Then, set the Snap type: mandatory or proximity. If proximity is chosen, you will be able to customize the limit value.

Parallax items

This is exclusive of GSAP ScrollSmoother integration. It will let us create nice parallax effects on any widget.
To create them, use the repeater available at this section, and set the classname of the element to target, it’s speed and lag.
Speed 0.5 would scroll at half the normal speed and Speed 2 would scroll at twice the normal speed. Lag 0.8 would take 0.8 seconds to “catch up”.
To create inner parallax effects at images, put the image inside a smaller block that has “overflow: hidden” and set the image item’s speed at the repeater control to “auto”.