viewmotion

Smooth scroll

Lenis integration

viewmotion includes optional smooth scroll support powered by Lenis. When enabled, scroll behaviour becomes buttery-smooth and all reveal animations continue to work seamlessly.

Install Lenis

Lenis is listed as an optional peer dependency: 

npm install lenis

Enable smooth scroll

Pass smoothScroll: true to initMotion(): 

import { initMotion } from "viewmotion";

initMotion({ smoothScroll: true });

Custom Lenis options

Pass a scroll object to customize Lenis behaviour: 

initMotion({
  smoothScroll: true,
  scroll: {
    lerp: 0.08,
    wheelMultiplier: 1,
  },
});

Common Lenis options

OptionTypeDefaultDescription
lerpnumber0.1Linear interpolation intensity (0–1)
durationnumber1.2Scroll animation duration (s)
smoothWheelbooleantrueEnable smooth scrolling for mouse wheel
orientationstring"vertical"Scroll orientation: "vertical" or "horizontal"

Astro ViewTransitions

When using Astro’s ClientRouter, re-initialize on each navigation: 

<script>
  import { initMotion } from "viewmotion";

  document.addEventListener("astro:page-load", () => {
    initMotion({ smoothScroll: true });
  });
</script>

How it works

When smoothScroll is enabled, viewmotion dynamically imports Lenis and creates a new instance. The IntersectionObserver continues to observe elements normally — it works with the transformed scroll position that Lenis generates.

If Lenis is not installed and smoothScroll is enabled, viewmotion logs a console warning and falls back to native scroll.

Astro adapter SSR & Hydration