choreographer-js
choreographer-js copied to clipboard
Update range on window resize?
I'm doing the following to handle updating animations on window resize:
var Choreographer = require('choreographer-js');
var obj_anim = [
{
range: [-1, 500],
selector: '.object',
type: 'scale',
style: 'transform:translateY',
from: 100,
to: 0,
unit: '%'
},
{
range: [document.getElementById('trigger').getBoundingClientRect().top + window.scrollY, document.getElementById('trigger').getBoundingClientRect().top + window.scrollY + 300],
selector: '.object',
type: 'scale',
style: 'left',
from: 50,
to: -50,
unit: '%'
}
];
var choreographer = new Choreographer({
animations: obj_anim
});
window.addEventListener('scroll', function() {
choreographer.runAnimationsAt(window.pageYOffset);
});
window.addEventListener('resize', function() {
choreographer.updateAnimations(obj_anim);
});
However the animation doesn't begin when the trigger element hits the top of the page as expected unless I hard refresh. It doesn't seem to be respecting the range I've set.
I can confirm that the distance from the top of the document to the top of the trigger element is accurate on resize, so what am I missing here?
Thanks!