Skip to content

derhuerst/scroll-animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

npm version build status ISC-licensed chat on gitter support me on Patreon

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.