@shentohendriks/svelte-smoothscroll
v0.0.8
Published
Package that utilizes locomotive-scroll 5 with Svelte 5 and Svelte Kit
Downloads
32
Maintainers
Readme
Svelte Smoothscroll
A Svelte 5 compatible smooth scrolling library using LocomotiveScroll V5 for smooth scrolling and parallax effects.
Features
- Svelte 5 Compatibility: Designed specifically for use with Svelte 5.
- Smooth Scrolling: Implements smooth scrolling functionality.
- Parallax Effects: Enables parallax effects for enhanced visual appeal.
- SSR Compatible: Modified to work in SSR applications, ensuring SEO-friendliness.
Installation
npm install @shentohendriks/svelte-smoothscroll
Usage
1. Wrap your content in +layout.svelte
Import the ScrollWrapper
component and wrap it around the content where you want smooth scrolling and parallax effects:
<script>
import { ScrollWrapper } from '@shentohendriks/svelte-smoothscroll';
const { children } = $props();
</script>
<ScrollWrapper settings={{smoothWheel: true}}>
{@render children()}
</ScrollWrapper>
2. Apply smooth scroll and parallax in +page.svelte
Use data attributes to control scrolling behavior:
<div data-scroll data-scroll-section class="wrapper">
<p data-scroll data-scroll-speed="0.10">This moves slow</p>
<h1 data-scroll data-scroll-speed="0.2">This moves at medium speed</h1>
<p data-scroll data-scroll-speed="0.25">This moves a little bit faster</p>
<div data-scroll>This moves at normal speed</div>
</div>
<style>
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
height: 200vh;
}
</style>
Configuration
Pass additional Lenis settings as an object to the settings
prop of ScrollWrapper
. For more options, refer to the LocomotiveScroll documentation.