diff --git a/js/animation-control.js b/js/animation-control.js index afb2bfb..8853041 100644 --- a/js/animation-control.js +++ b/js/animation-control.js @@ -12,41 +12,40 @@ const rightFoot = document.querySelector('.right-foot'); let animationIndex = 0; let init = function() { - if (typeof InstallTrigger !== 'undefined') { - document.body.classList.add('ff'); - - // owl-graphic: transform-origin: center bottom - const owlGraphicBbox = owlGraphic.getBBox(); - const owlGraphicToX = owlGraphicBbox.x + (owlGraphicBbox.width / 2); - const owlGraphicToY = owlGraphicBbox.y + owlGraphicBbox.height; - owlGraphic.style['transform-origin'] = `${owlGraphicToX}px ${owlGraphicToY}px`; - - // eyes transform-origin: 50% 50% - const eyesBbox = eyes.getBBox(); - const eyesToX = eyesBbox.x + (eyesBbox.width / 2); - const eyesToY = eyesBbox.y + (eyesBbox.height / 2); - eyes.style['transform-origin'] = `${eyesToX}px ${eyesToY}px`; - - // left-wing transform-origin: right top - const leftWingBbox = leftWing.getBBox(); - const leftWingToX = leftWingBbox.x + leftWingBbox.width; - const leftWingToY = leftWingBbox.y; - leftWing.style['transform-origin'] = `${leftWingToX}px ${leftWingToY}px`; - - // right-wing transform-origin: left top - const rightWingBbox = rightWing.getBBox(); - const rightWingToX = rightWingBbox.x; - const rightWingToY = rightWingBbox.y; - rightWing.style['transform-origin'] = `${rightWingToX}px ${rightWingToY}px`; - - // foot transform-origin: center top - for (let i = 0; i < feet.length; i++) { - let footEl = feet[i]; - let footBbox = footEl.getBBox(); - let footToX = footBbox.x + (footBbox.width / 2); - let footToY = footBbox.y; - footEl.style['transform-origin'] = `${footToX}px ${footToY}px`; - } + // As of Chrome 64, percentage based transforms work the same way as Firefox + document.body.classList.add('ff'); + + // owl-graphic: transform-origin: center bottom + const owlGraphicBbox = owlGraphic.getBBox(); + const owlGraphicToX = owlGraphicBbox.x + (owlGraphicBbox.width / 2); + const owlGraphicToY = owlGraphicBbox.y + owlGraphicBbox.height; + owlGraphic.style['transform-origin'] = `${owlGraphicToX}px ${owlGraphicToY}px`; + + // eyes transform-origin: 50% 50% + const eyesBbox = eyes.getBBox(); + const eyesToX = eyesBbox.x + (eyesBbox.width / 2); + const eyesToY = eyesBbox.y + (eyesBbox.height / 2); + eyes.style['transform-origin'] = `${eyesToX}px ${eyesToY}px`; + + // left-wing transform-origin: right top + const leftWingBbox = leftWing.getBBox(); + const leftWingToX = leftWingBbox.x + leftWingBbox.width; + const leftWingToY = leftWingBbox.y; + leftWing.style['transform-origin'] = `${leftWingToX}px ${leftWingToY}px`; + + // right-wing transform-origin: left top + const rightWingBbox = rightWing.getBBox(); + const rightWingToX = rightWingBbox.x; + const rightWingToY = rightWingBbox.y; + rightWing.style['transform-origin'] = `${rightWingToX}px ${rightWingToY}px`; + + // foot transform-origin: center top + for (let i = 0; i < feet.length; i++) { + let footEl = feet[i]; + let footBbox = footEl.getBBox(); + let footToX = footBbox.x + (footBbox.width / 2); + let footToY = footBbox.y; + footEl.style['transform-origin'] = `${footToX}px ${footToY}px`; } }