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