• Stars
    star
    350
  • Rank 121,229 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 6 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🐭 A tiny 250b scroll listener with progress.

Update On Scroll (uos)

npm version gzip size license dependencies TypeScript

Update On Scroll (uos) is a tiny library to provide the easiest way for updating values on scroll. Based on percentual or pixel based begin and end values, progress is returned trough a callback.

This utility can be useful for CSS animations, DOM changes, WebGL transitions or anything that can be updated based on a progress value.

Features:

  • Small in size, no dependencies
  • Percentage or pixel based values
  • Optimized for multiple instances

Install

$ npm install --save uos

Usage

Import the library:

import updateOnScroll from 'uos';

Update an element based on pixels:

updateOnScroll(100, 500, progress => {
  // Progress between 100px and 500px
});

Update an element based on percentages:

updateOnScroll(0.2, 0.6, progress => {
  // Progress between 20% and 60%
});

Only a single scroll listener will be used regardless of how many instances are created. The callback of an instance will be called on every update.

License

MIT Β© Colin van Eenige

More Repositories

1

phenomenon

⚑️ A fast 2kB low-level WebGL API.
TypeScript
1,773
star
2

unswitch

πŸ•Ή A tiny event handler for Switch controllers!
JavaScript
573
star
3

THREE.Phenomenon

⭐️ A tiny wrapper around three.js built for high-performance WebGL experiences.
TypeScript
360
star
4

scroll-transitions-webgl

A demo that demonstrates how a smooth WebGL transition can be realized using Phenomenon (based on three.js).
JavaScript
154
star
5

offline-gallery

🎈 A 16kb Preact & Redux based Progressive Web App that offers an offline gallery experience of external images.
JavaScript
96
star
6

uon

🐨 A tiny 200b route change observer.
TypeScript
84
star
7

phenomenon-px

⚑️ The fastest way to create pixel shaders.
JavaScript
81
star
8

unvault

πŸ“¦ A minimal layer for node that allows results of time-consuming tasks to be stored.
JavaScript
61
star
9

periodic-weather

β˜€οΈ A 17kb Preact & Redux based Progressive Web App that provides relevant information to the user outside of the tab.
JavaScript
59
star
10

rupi

πŸ’―An alternative to Preact with the same syntax, size and functionality.
44
star
11

webgl-structure

πŸš€ A modern, ES6 based, javascript structure for WebGL based projects with THREE.js!
JavaScript
44
star
12

preact-gallery

πŸ™ A modern gallery experience disguised as a tiny (8kb) Preact based PWA.
JavaScript
43
star
13

uot

🦁 A tiny setTimeout alternative with progress.
JavaScript
43
star
14

rainbow-explorer

🌈 A 20kb Preact & Redux based Progressive Web App that translates real life color to digital color.
JavaScript
27
star
15

untrace

🐳 Minimal event tracking on the client in 300 bytes.
JavaScript
25
star
16

periodic-weather-analytics

⚑️ A high performance Preact based PWA providing an overview of information from Periodic Weather.
JavaScript
25
star
17

hold.js

A tiny (no dependency) library for click / touch and hold functionality!
JavaScript
19
star
18

prefers

✍️ Detect system (or manually set) preferences for color scheme and reduced motion.
JavaScript
19
star
19

zero-distraction-js13k

πŸ”₯A simple (6kb) WebGL game made for the JS13K competition!
JavaScript
15
star
20

unvault-middleware

πŸ“¦ A middleware to automatically setup routes, store expected responses and deliver results fast.
JavaScript
7
star