WAB Dom Scroll Animator
This library allows to react to scroll events and animate DOM elements based on the scroll position.
One of the key features is that the animation is not based on the scroll position of the entire page, but on the scroll position of a specific container. This allows to have multiple animations on the same page, each one reacting to the scroll position of a different container.
Installation
npm install --save wab-dom-scroll-animator
Usage
// ES6 module
import WDSA from 'wab-dom-scroll-animator'
// CommonJS
const WDSA = require('wab-dom-scroll-animator')
// Register a container to observe
// and define the elements to animate
WDSA.register({
container: document.querySelector('main'),
// showDebug: true,
elements: [{
target: document.querySelector('main .my-element'),
properties: {
opacity: [0, 1]
}
}, {
target: document.querySelector('header .alert-secondary'),
properties: {
opacity: [0, 1],
translateX: ['-100px', 0]
},
startAt: 5,
endAt: 80
}]
})
Methods
-
register(options)
- Register a container to observe and define the elements to animate-
options - Object
-
container
- DOM element to observe -
showDebug = false
- Boolean (optional) - Show debug information -
elements
- Array of objects-
target
- DOM element to animate | NodeList of DOM elements to animate -
properties
- Object with the properties to animate. See all available properties below -
startAt
- Number (optional) - Start animation at this percentage of the container height, from the TOP -
endAt
- Number (optional) - End animation at this percentage of the container height, from the BOTTOM -
debounceTime
- Number (optional) - Debounce time in milliseconds -
delay
- fn() => Number (optional) - Delay in milliseconds - Used for staggering elements
-
-
-
returns
WDSA
instance
-
options - Object
Properties
These are all properties that can be animated. The value is an array with the start and end value of the animation.
type WdsaAnimatorProperty = {
// css properties
width: WdsaAnimatorProperty
height: WdsaAnimatorProperty
top: WdsaAnimatorProperty
right: WdsaAnimatorProperty
bottom: WdsaAnimatorProperty
left: WdsaAnimatorProperty
opacity: WdsaAnimatorProperty
// transform properties
rotateX: WdsaAnimatorProperty
rotateY: WdsaAnimatorProperty
rotateZ: WdsaAnimatorProperty
scale: WdsaAnimatorProperty
scaleX: WdsaAnimatorProperty
scaleY: WdsaAnimatorProperty
scaleZ: WdsaAnimatorProperty
skew: WdsaAnimatorProperty
skewX: WdsaAnimatorProperty
skewY: WdsaAnimatorProperty
perspective: WdsaAnimatorProperty
translateX: WdsaAnimatorProperty
translateY: WdsaAnimatorProperty
translateZ: WdsaAnimatorProperty
rotate: WdsaAnimatorProperty
}
Example
// animate width and height
properties: {
width: ['0px', '100px'],
height: ['0px', '100px']
}
Contributing
Feel free to contribute to this project by opening issues or pull requests.