CrystalScrollSmoother

CrystalScrollSmoother wraps your page content in GSAP's ScrollSmoother for buttery-smooth scrolling. Supports parallax effects via data-speed attributes and automatically disables on mobile or when reduced motion is preferred.

Import

import { CrystalScrollSmoother } from '@artasce/crystal-ui';

Usage

<CrystalScrollSmoother>
  <section>
    <h1>Hero Section</h1>
  </section>
  <section>
    <img data-speed="0.8" src="/bg.jpg" alt="" />
    <div data-speed="1.2">Parallax content</div>
  </section>
</CrystalScrollSmoother>

Props

CrystalScrollSmoother Props

Token	Variable	Value	Description
`children`	`ReactNode`	(required)	Page content to smooth-scroll
`smooth`	`number`	1.5	Smoothness factor (higher = smoother)
`effects`	`boolean`	true	Enable data-speed parallax effects
`smoothTouch`	`number \| false`	0.1	Touch smooth factor (false to disable)
`normalizeScroll`	`boolean`	true	Normalize scroll behavior across browsers
`ignoreMobileResize`	`boolean`	true	Ignore mobile resize events (address bar)
`desktopOnly`	`boolean`	true	Disable smooth scroll on mobile
`breakpoint`	`number`	768	Mobile breakpoint (px)
`respectReducedMotion`	`boolean`	true	Disable when prefers-reduced-motion
`onCreated`	`(smoother: ScrollSmoother) => void`	—	Callback with ScrollSmoother instance
`className`	`string`	—	Container CSS classes
`contentClassName`	`string`	—	Content wrapper CSS classes

Values update live with theme changes. Click any row to copy the CSS variable.

Parallax with data-speed

Add data-speed attributes to children for parallax:

<CrystalScrollSmoother>
  <img data-speed="0.5" src="/bg.jpg" />   {/* Slower than scroll */}
  <div data-speed="1.0">Normal speed</div>
  <div data-speed="1.5">Faster than scroll</div>
</CrystalScrollSmoother>

Important Notes

Fixed elements (headers, FABs) must be placed outside CrystalScrollSmoother
GSAP ScrollSmoother is now completely free (post-Webflow acquisition)
Do not use Lenis or Locomotive Scroll — GSAP covers this