# electerious/basicscroll

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/electerious-basicscroll).**

3,607 stars · 148 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/electerious/basicScroll
- Homepage: https://basicscroll.electerious.com
- awesome-repositories: https://awesome-repositories.com/repository/electerious-basicscroll.md

## Description

BasicScroll is a standalone scroll-driven animation library that updates CSS custom properties, element styles, and CSS properties dynamically based on absolute or relative viewport scroll positions. It functions as an animation engine designed to build custom parallax scrolling experiences and fluid visual effects on both mobile and desktop viewports.

The library supports custom scroll range definitions anchored directly to specific document elements, alongside callback executions that trigger user-defined functions with live progress data and state percentages as the viewport enters or leaves specified boundaries. It provides programmatic lifecycle controls to start, stop, and recalculate animation instances, as well as JavaScript extension hooks to execute custom code during scroll updates.

## Tags

### Part of an Awesome List

- [视差滚动(Parallax Scrolling)](https://awesome-repositories.com/f/awesome-lists/more/parallax-scrolling.md) — Builds standalone parallax scrolling experiences across mobile and desktop devices.

### User Interface & Experience

- [CSS Variable Animators](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/css-variable-animators.md) — Updates CSS custom properties based on absolute or relative viewport scroll positions.
- [Frame-Synchronized Scroll Loops](https://awesome-repositories.com/f/user-interface-experience/scroll-animations/smooth-scrolling/frame-synchronized-scroll-loops.md) — Synchronises scroll calculations and visual updates with the browser refresh cycle.
- [Custom Scroll Triggers](https://awesome-repositories.com/f/user-interface-experience/scroll-containers/custom-scroll-triggers.md) — Defines custom scroll ranges anchored directly to specific document elements. ([source](https://github.com/electerious/basicscroll#readme))
- [Scroll-Driven Animation Tools](https://awesome-repositories.com/f/user-interface-experience/scroll-driven-animation-tools.md) — Updates CSS properties dynamically during page scrolls to enable fluid parallax effects. ([source](https://github.com/electerious/basicscroll#readme))
- [CSS Custom Property Bindings](https://awesome-repositories.com/f/user-interface-experience/styled-properties/css-custom-property-bindings.md) — Updates native CSS properties directly via custom properties on every scroll frame.
- [Cross-Browser Input Abstractions](https://awesome-repositories.com/f/user-interface-experience/cross-browser-input-abstractions.md) — Normalises touch gestures and mouse wheel events into a consistent internal coordinate system.
- [Cross-Device Input Handlers](https://awesome-repositories.com/f/user-interface-experience/cross-device-input-handlers.md) — Handles touch gestures and mouse inputs seamlessly across mobile and desktop viewports. ([source](https://basicscroll.electerious.com/))
- [Touch-Based Viewport Scrolling](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-libraries/multi-touch-gesture-systems/touch-based-viewport-scrolling.md) — Manages interactive scroll animations and custom touch gestures across viewports.

### Web Development

- [Element Anchoring](https://awesome-repositories.com/f/web-development/dom-element-selectors/element-anchoring.md) — Calculates dynamic scroll start and end boundaries relative to specific document elements.
- [Smooth Scroll Libraries](https://awesome-repositories.com/f/web-development/smooth-scroll-libraries.md) — Provides a standalone library that animates CSS variables during page scrolls.

### Graphics & Multimedia

- [JavaScript Animation Libraries](https://awesome-repositories.com/f/graphics-multimedia/javascript-animation-libraries.md) — Executes custom JavaScript code during scroll updates to customize animation behavior. ([source](https://basicscroll.electerious.com/))