scroll-vibe
v0.1.1
Published
> A tool for any framework that simplifies working with scroll animations - 💡 Intuitive - 🦾 Type Safe - 📦 Extremely light - 🔧 Framework-agnostic
Downloads
13
Maintainers
Readme
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>