https://github.com/somespecialone/potiah

Vue.js wrapper for Locomotive Scroll 🚂
https://github.com/somespecialone/potiah

component lenis locomotive-scroll nuxt scroll typescript vue

Last synced: 3 months ago
JSON representation

Vue.js wrapper for Locomotive Scroll 🚂

• Host: GitHub
• URL: https://github.com/somespecialone/potiah
• Owner: somespecialone
• License: mit
• Created: 2023-06-17T20:46:42.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-04T20:01:45.000Z (over 1 year ago)
• Last Synced: 2025-05-30T23:33:37.827Z (4 months ago)
• Topics: component, lenis, locomotive-scroll, nuxt, scroll, typescript, vue
• Language: TypeScript
• Homepage: https://potiah.somespecial.one/
• Size: 225 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  

    

  

  
Potiah


[![Made in Ukraine](https://img.shields.io/badge/made_in-ukraine-ffd700.svg?labelColor=0057b7)](https://stand-with-ukraine.pp.ua)

[![license](https://img.shields.io/github/license/somespecialone/potiah)](https://github.com/somespecialone/potiah/blob/main/LICENSE)

[![npm](https://img.shields.io/npm/v/potiah)](https://www.npmjs.com/package/potiah)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/potiah)](https://bundlephobia.com/package/potiah)

[![Docs](https://github.com/somespecialone/potiah/actions/workflows/docs.yml/badge.svg)](https://github.com/somespecialone/potiah/actions/workflows/docs.yml)

[![Publish](https://github.com/somespecialone/potiah/actions/workflows/publish.yml/badge.svg)](https://github.com/somespecialone/potiah/actions/workflows/publish.yml)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/github/somespecialone/potiah/tree/main/playground/?file=src%2Fpages%2FHomeRoute.vue&title=Potiah%20Playground)

_Potiah_ (pronounced `/pot'jʌɦ/`, means _train_ in Ukrainian) is a thin [Vue.js](https://vuejs.org) wrapper for

precious [Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) 🚂.

> _"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."_

>

> – ChatGPT

* [Documentation 📖](https://potiah.somespecial.one)

* [Online playground ✨](https://stackblitz.com/github/somespecialone/potiah/tree/main/playground/?file=src%2Fpages%2FHomeRoute.vue&title=Potiah%20Playground)

---

> [!WARNING]

> The project is unstable and depends

> on [Locomotive Scroll v5 beta](https://github.com/locomotivemtl/locomotive-scroll/tree/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

```sh

npm install potiah

```

```sh

pnpm add potiah

```

```sh

yarn add potiah

```

### Direct Download / CDN

Specified version

```html

```

Latest

```html

```

❗ Also note, that you need to load [lenis styles](https://github.com/studio-freight/lenis#considerations) from CDN too

```html

```

## Basic usage

### Setup plugin

```js

import 'locomotive-scroll/locomotive-scroll.css' // if you install trough package manager  

import { createPotiah } from 'potiah'

import App from './App.vue'

const app = createApp(App)

app.use(createPotiah())

app.mount('#app')

```

### Create view

```vue

import { ScrollView } from 'potiah'

  

    

  

```

### Place scroll components

```vue

import { ScrollView, ScrollComponent } from 'potiah'

  

    

      

    

    

  

```

### Use composable

```vue

import { usePotiah } from 'potiah'

const { scrollTo } = usePotiah()

// example

function handleClickOnSomeElement({target}) {

  scrollTo(target)

}

```

## Core

* `Potiah` - 🚂.

* `` - wrapper for scrollable scene. It can be whole document or any container element inside the DOM.

* `` - `scroll element` within scroll scene. It gathers all `data-*`

  attributes from [Locomotive Scroll element](https://scroll.locomotive.ca/docs/#/attributes).

* `usePotiah` - composable that returns current `Potiah` instance, `scrollTo` function, refs with scroll data.

> [!TIP]

> For more information please visit [Documentation 📖](https://potiah.somespecial.one)

## Credits:

* [Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll)

* [Lenis](https://github.com/studio-freight/lenis)

* Train from logo - [Aslan Almukhambetov](https://dribbble.com/reggid) CC Attribution License via [SVG Repo](https://www.svgrepo.com/)