ScrollVibe

A tool for any framework that simplifies working with scroll animations

• 💡 Intuitive
• 🦾 Type Safe
• 📦 Extremely light
• 🔧 Framework-agnostic

Installation

npm install scroll-vibe

Usage

html

<main class="example-page">
    <section class="example-section-1">1</section>
    <section class="example-section-2">2</section>
    <section class="example-section-3">3</section>
    <section class="example-section">4</section>
</main>

<style>
    .example-section {
        height: 500vh;
    }
</style>

javascript

import { ScrollVibe } from 'scroll-vibe'

const scrollVibeRoot = new ScrollVibe('.page')

// Or

const page = document.querySelector('.page')

const scrollVibeRoot = new ScrollVibe(page)

Handle root events

const scrollVibeRoot = new ScrollVibe('.page')

// data: { scrollY: number, oldScrollY: number, direction: "up" | "down"}
scrollVibeRoot.on('scroll', (data) => {
    console.log(data) 
})

// data: ResizeObserverEntry[]
scrollVibeRoot.on('resize', (data) => {
    console.log(data)
})

Handle child events

const scrollVibeChild = new ScrollVibeChild('.example-section-1')

// const data = {
//     prgogress: number - shows how much the block is scrolled (as a percentage)
//     properties: {
//         start: number - the upper point of the block relative to the page (in pixels)
//         end: number - the lower point of the block relative to the page (in pixels)
//         height: number - block height (in pixels)
//         padding: {
//             top: number - the upper indentation before the start of the scroll progress
//             bottom: number - lower indentation after full scrolling of the block
//         }
//     }
// }
scrollVibeChild.on('progressChange', (data) => {
    console.log(data)
})

Setting paddings (in pixels, percentage of height, vh)

<main class="page">
    <section class="section section_1" data-sv-padding-top="200px">1</section>
    <section class="section section_2" data-sv-padding-bottom="10%">2</section>
    <section class="section section_3" data-sv-padding-bottom="5vh">3</section>
    <section class="section section_4">4</section>
</main>

Using the progress value in css

<style>
    .section_1 {
        opacity: calc(var(--sv-progress) / 100);
    }
</style>

Removing handlers when leaving the page

const scrollVibeRoot = new ScrollVibe('.page')

scrollVibeRoot.destroy()

Recalculation if necessary (if the recalculation did not work for some reason)

const scrollVibeRoot = new ScrollVibe('.page')

scrollVibeRoot.recalc()

Exceptions that are not needed for calculations

<main class="page">
    <div></
    <section class="section section_1">1</section>
    <section class="section section_2">2</section>
    <section class="section section_3">3</section>
    <section class="section section_4">4</section>

    <div class="up-button" data-sv-exception="true">
        <button>up</button>
    </div>
</main>