Standalone parallax scrolling
with CSS variables

basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want.

See on GitHub     Live Demo

Flexible animations

Animate everything you want with CSS variables and CSS properties. Or use JS to get even more control over your animations.

Insane performance

Small, modern and dependency-free. basicScroll is highly optimized and allows you to build butter-smooth animations.

Desktop and mobile

basicScroll works from small to big screens without changing a line of code. No matter if you use a touch input or cursor.

import * as basicScroll from 'basicscroll'

const instance = basicScroll.create({
   elem: document.querySelector('.box'),
   from: 'top-top',
   to: 'bottom-bottom',
   props: {
      '--r': {
         from: 0,
         to: '1turn',
         direct: true
      '--tx': {
         from: '-100px',
         to: '100px',
         direct: true

// Recalculate all positions and update all properties manually when the viewport size changes.
// Debounce this function in production to avoid unnecessary calculations.
window.onresize = function() {


.box {
   width: 5em;
   height: 5em;
   background: linear-gradient(135deg, #3cdddd, #ff1ac6);
   transform: translateX(var(--tx)) rotate(var(--r));
   transition: transform .1s linear;
   will-change: transform;