Smooth Scroll

Monogram includes a smooth scrolling engine powered by GSAP ScrollSmoother. Instead of the default browser scroll, the page content follows your scroll input with a graceful, cinematic easing - giving your site a polished, premium feel.

Smooth scroll is desktop-only. On mobile and touch devices the theme falls back to native browser scrolling for the best performance and user experience. It is also automatically disabled inside the Elementor editor so it does not interfere with your page-building workflow.

#How It Works

When enabled, ScrollSmoother wraps your page content in a special container and translates it with GSAP instead of relying on the browser built-in scroll. The result is a buttery-smooth motion where the page catches up to your scroll position at a controlled speed.

The engine automatically refreshes its calculations after lazy-loaded images, fonts, and other deferred content finish loading. This prevents layout shifts from throwing off scroll positions.

#Settings

Navigate to Appearance > Customize > Smooth Scroll to configure the feature.

#General Tab

Setting	Type	Default	Description
Enable Smooth Scroll	Toggle	On	Master switch. When off, the site uses native browser scrolling.
Scroll Smoothness	Slider (0.5-3.0)	1.75	Controls how smooth the scroll feels on desktop. Higher values create a more cinematic, floaty scroll but may feel less responsive. A range of 1.0-1.5 is recommended for most sites.
Touch Smoothness	Slider (0-1.0)	0.1	Smoothing factor for touch devices. Keep this low (0.05-0.2) so touch scrolling still feels natural.

#Advanced Tab

Setting	Type	Default	Description
Effects Selector	Text	.jkd-smooth	CSS selector for elements that receive scroll-based parallax effects. Any element matching this selector can use ScrollSmoother speed and lag attributes.
Wrapper Selector	Text	#site-content	The outer wrapper element that ScrollSmoother needs. You should not change this unless you have customized the theme HTML structure.
Content Selector	Text	#content-inner	The inner scrollable content element. Like the wrapper, leave this at the default unless you have modified the theme markup.

#Tips

• If your page feels too "floaty," lower the Scroll Smoothness value toward 1.0.
• To add parallax effects to an element, give it the class matching your Effects Selector (.jkd-smooth by default) and add a data-speed attribute (e.g., data-speed="0.8" to scroll slower than the page).
• You can temporarily disable smooth scroll for testing by adding ?smooth_scroll_enabled=false to any page URL.

Last updated 6 Sep 2026