vuecomotive-scroll v0.2.2

Vuecomotive Scroll is a thin Vue.js wrapper for precious Locomotive Scroll v5 🚂.

It utilizes native Vue features such as components and composables to give maximum control over LocomotiveScroll API to developer and make it easier to integrate it into a Vue app.

Documentation 📖

⚠️ The project is unstable and depends on Locomotive Scroll v5 beta. So there might be some breaking changes in the future unless stable (first major) version is released. Best regards!

Installation

Bundler / package manager

npm install vuecomotive-scroll

pnpm add vuecomotive-scroll

yarn add vuecomotive-scroll

Direct Download / CDN

Specified version

<script src="https://unpkg.com/vuecomotive-scroll@0.2.2"></script>

Latest

<script src="https://unpkg.com/vuecomotive-scroll"></script>

Also note, that you need to load lenis styles from CDN too

<link rel="stylesheet" href="https://unpkg.com/vuecomotive-scroll/dist/lenis.css">

Basic usage

Setup plugin

import { createApp } from 'vue'

import 'vuecomotive-scroll/dist/lenis.css' // if you install trough package manager  
import createVuecomotiveScroll from 'vuecomotive-scroll'

import App from './App.vue'

const app = createApp(App)
const scroll = createVuecomotiveScroll()

app.use(scroll)
app.mount('#app')

Create view

<template>
  <ScrollView root :duration="1.7">
    <!-- your components/content-->
  </ScrollView>
</template>

Place scroll components

<template>
  <ScrollView root :duration="1.7">
    <ScrollComponent class="first-scroll-component" :speed="0.2" css-progress>
      <!-- your components/content-->
    </ScrollComponent>
    <!-- your components -->
  </ScrollView>
</template>

Use composable

<script lang="ts">
import { useScroll } from 'vuecomotive-scroll'

const { scrollTo } = useScroll()

// example
function handleClickOnSomeElement({target}) {
  scrollTo(target)
}
</script>

Core

• scroll - 🚂.
• <ScrollView /> - wrapper for scrollable scene. It can be whole document or any container element inside the DOM.
• <ScrollComponent /> - scroll element within scroll scene. It gathers all data-* attributes from Locomotive Scroll element.
• useScroll - composable that returns scroll, scrollTo function, refs with scroll data.

For all details please visit Documentation 📖

Licences:

• Train from logo - Aslan Almukhambetov CC Attribution License via SVG Repo