1.0.12 • Published 7 years ago
scrollanimate v1.0.12
ScrollAnimate
Animate on scroll.
Use
If you want to stop the scroll during animations
html,
body {
overflow: hidden;
}
#wrapper {
overflow: auto;
}
Import ScrollAnimate.js
// In index.js
import ScrollAnimate from '../../lib/scrollAnimate'
// Or in index.html
<script src="scrollAnimate.js"></script>
Init scrollAnimate
var scrollAnimate = new ScrollAnimate(wrapper, onAnimatingUpdate)
// If you want the scroll to stop during animation,
// use onAnimatingUpdate to update the wrapper overflow like so :
function onAnimatingUpdate(isAnimating) {
document.getElementById('wrapper').style.overflow = (isAnimating ? 'hidden' : 'auto')
}
Name | Type | Description |
---|---|---|
wrapper | DOM element | Main wrapper, scrollAnimate add event listeners to this wrapper |
onAnimatingUpdate | function(isAnimating) | Callback triggered when the animating state change |
Create new animation
var animation = scrollAnimate.create(element, triggerOffsetTop, scrollForComplete, onProgressUpdate)
Name | Type | Description |
---|---|---|
element | DOM element | Element animated, required to determine when the animation should trigger |
triggerOffsetTop | int | Add offset top before animation triggers |
scrollForComplete | int | Amount of virtual scroll required to complete the animation, the more the longer |
onProgressUpdate | function(progress) | Callback when animation progress update. progress is between 0 and 1 |
Example
import ScrollAnimate from 'scrollAnimate'
let wrapper = document.getElementById('wrapper')
let timeline1 = document.getElementById('timeline1')
let timeline2 = document.getElementById('timeline2')
let scrollAnimate = new ScrollAnimate(wrapper, onAnimatingUpdate)
function onAnimatingUpdate(isAnimating) {
wrapper.style.overflow = (isAnimating ? 'hidden' : 'auto')
}
let animation1 = scrollAnimate.create(timeline1, 150, 1000, (progress) => {
timeline1.style.width = progress * 100 + '%'
})
let animation2 = scrollAnimate.create(timeline2, 150, 1000, (progress) => {
timeline2.style.width = progress * 100 + '%'
})
Todo
- Reverse mode
- Tests