basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want.
BasicScroll, is a standalone utility primarily focused on achieving parallax scrolling effects using native CSS variables.
Features:
Standalone Parallax Scrolling: basicScroll is specifically designed to enable parallax scrolling effects.
CSS Variable Control: Its core mechanism is allowing developers to change CSS variables depending on the scroll position.
CSS-Driven Animations: Users can then use these dynamically changing variables directly in their CSS to animate any desired element or property.
Flexible Animations: It allows for the animation of everything you want using CSS variables and CSS properties.
JavaScript Control: For those seeking more advanced control, basicScroll also supports using JavaScript to gain even greater command over the animations. The sources refer to this concept as "Parallax scrolling with JS controlled CSS variables".
Insane Performance: The tool is highly optimized and is known for building butter-smooth animations.
Lightweight and Modern: basicScroll is described as being small, modern, and framework independent.
Compatibility: It works seamlessly across desktop and mobile screens, supporting both touch input and cursors without requiring code changes.
Declarative Configuration: Animation properties are defined using a structured create method, where developers specify the target element (elem), the scroll boundaries (from and to, e.g., 'bottom-bottom' to 'top-top'), and the specific CSS variables (props) they want to interpolate (e.g., '--r' for rotation or '--tx' for translation).