basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want.
Animate everything you want with CSS variables and CSS properties. Or use JS to get even more control over your animations.
Small, modern and framework independent. basicScroll is highly optimized and allows you to build butter-smooth animations.
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: 'bottom-bottom',
to: 'top-top',
direct: true,
props: {
'--r': {
from: '0',
to: '1turn'
},
'--tx': {
from: '-100px',
to: '100px'
}
}
})
instance.start().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;
}
Convinced? Want to learn more? Grab the source and documentation from GitHub or play with our CodePen demos.