Potiah

Appearance

Getting started ​

What is Potiah? ​

Potiah (pronounced /pot'jʌÉĶ/, means train in Ukrainian) is a thin Vue.js wrapper for precious 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

Core of the library:

Before starting UNSTABLE ​

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 ​

Prerequisites ​

  • Vue version 3.3.0 or higher.

Bundler / package manager ​

sh
npm install potiah
npm install potiah
sh
pnpm add potiah
pnpm add potiah
sh
yarn add potiah
yarn add potiah

Direct Download / CDN ​

html
<script src="https://unpkg.com/potiah@1.0.0-alpha.1"></script>
<script src="https://unpkg.com/potiah@1.0.0-alpha.1"></script>
html
<script src="https://unpkg.com/potiah"></script>
<script src="https://unpkg.com/potiah"></script>

Here unpkg is used as the CDN provider, but you can use any other CDN that serves npm packages. All top-level APIs are exposed as properties of the global Potiah object.

umd script inside use global Vue object, so don't forget to add vue as below:

html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- Potiah could be place there -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- Potiah could be place there -->

If you want to use library via native ES modules like Vuethere you can import it from CDN ES build using importmap (because dependencies externalized in ES Build):

html
<script type='importmap'>
{
  "imports": {
    "@studio-freight/lenis": "https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/dist/lenis.modern.mjs",
    "locomotive-scroll": "https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/dist/locomotive-scroll.modern.mjs",
  }
}
</script>

<script type="module">
  import { createScroll } from 'https://unpkg.com/potiah@1.0.0-alpha.1/dist/potiah.mjs'
</script>
<script type='importmap'>
{
  "imports": {
    "@studio-freight/lenis": "https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/dist/lenis.modern.mjs",
    "locomotive-scroll": "https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/dist/locomotive-scroll.modern.mjs",
  }
}
</script>

<script type="module">
  import { createScroll } from 'https://unpkg.com/potiah@1.0.0-alpha.1/dist/potiah.mjs'
</script>

Or even import it natively:

html
<script type='importmap'>
{
  "imports": {
    "@studio-freight/lenis": "https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/dist/lenis.modern.mjs",
    "locomotive-scroll": "https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/dist/locomotive-scroll.modern.mjs",
    "potiah": "https://unpkg.com/potiah@1.0.0-alpha.1/dist/potiah.mjs" 
  }
}
</script>

<script type="module">
  import { createScroll } from 'https://unpkg.com/potiah@1.0.0-alpha.1/dist/potiah.mjs' 
  import { createScroll } from 'potiah' 
</script>
<script type='importmap'>
{
  "imports": {
    "@studio-freight/lenis": "https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/dist/lenis.modern.mjs",
    "locomotive-scroll": "https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/dist/locomotive-scroll.modern.mjs",
    "potiah": "https://unpkg.com/potiah@1.0.0-alpha.1/dist/potiah.mjs" 
  }
}
</script>

<script type="module">
  import { createScroll } from 'https://unpkg.com/potiah@1.0.0-alpha.1/dist/potiah.mjs' 
  import { createScroll } from 'potiah' 
</script>

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

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/bundled/locomotive-scroll.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/bundled/locomotive-scroll.css">

Setup 🛠ïļ ​

If you use package manager import lenis styles in your code:

js
import 'locomotive-scroll/locomotive-scroll.css'
import 'locomotive-scroll/locomotive-scroll.css'

Create a scroll instance and pass it to the app as a plugin:

js
import { createApp } from 'vue'

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)
const potiah = createPotiah()

app.use(potiah)
app.mount('#app')
import { createApp } from 'vue'

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)
const potiah = createPotiah()

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

Creating instance arguments

createPotiah takes default options from LocomotiveScroll as argument and will be passed to every created LocomotiveScroll instance (every mounted ScrollView)