derhuerst/scroll-animation

Animate elements based on the scroll position.

scroll-animation

Animate elements based on the scroll position. Inspired by rellax and scroll-parallax. demo

Oh no, why another parallax script? Do we really need it?

I couldn't find an npm package that fit my needs:

• ability to animate any DOM property
• using requestAnimationFrame for performace
• suspending requestAnimationFrame after a while to minimize load
• no data- attributes or special tags

Installing

npm install scroll-animation

Usage

const animate = require('scroll-animation')

const el = document.querySelector('#el')
const animateEl = (percentage) => {
	const opacity = (1 - percentage * .6).toFixed(2)
	el.style.opacity = 'scale(' + scale + ')'
}

animate([
	{fn: animateEl, from: .4, to: .7}
])

This will animate the opacity of #el as long as the scroll position is between .4 and .7.

Contributing

If you have a question or have difficulties using scroll-animation, please double-check your code and setup first. If you think you have found a bug or want to propose a feature, refer to the issues page.