choreographer-js icon indicating copy to clipboard operation
choreographer-js copied to clipboard

Update range on window resize?

Open ndimatteo opened this issue 8 years ago • 0 comments

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!

ndimatteo avatar Jan 06 '17 06:01 ndimatteo