Vue plugin

Animate your vue components on scroll with HumbleScroll in just a few steps.

Installation

Add humblescroll-vue dependency to your project:

npm

npm install humblescroll-vue

Import the vue plugin and the css file in your main file:

// @/src/main.ts

import { humbleScrollVuePlugin } from 'humblescroll-vue' 
import 'humblescroll-vue/dist/style.css' 

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

Import the TailwindCSS plugin in your tailwind.config.js file:

// tailwind.config.js

import { humbleScrollTailwindPlugin } from 'humblescroll-vue'

export default {
  content: [],
  theme: {},
  plugins: [
    humbleScrollTailwindPlugin
  ]
}

Use the HumbleScroll component:

<script setup lang="ts">
import { HumbleScroll } from 'humblescroll-vue'
</script>

<template>
  <HumbleScroll animation="fade up">
    <h1 class="text-4xl font-bold">HumbleScroll</h1>
  </HumbleScroll>
</template>

✨ Well done! You have successfully installed HumbleScroll and you can now use it in your project.

Options

You can customize the plugins behavior by passing an options object to the plugin:

// @/src/main.ts

app.use(humbleScrollVuePlugin, {
  // Options go here
})

app.mount('#app')

See the options section for more details.

Getting StartedNuxt module