Created
July 17, 2019 12:30
-
-
Save adriandmitroca/15de2e2ed3a5816a1cd5eb800a68b83b to your computer and use it in GitHub Desktop.
Lottie, automatically fixing SVG scaling issue on Internet Explorer 11
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const lottieIeFixer = (el, perspective = 'width') => { | |
if (!window.navigator.userAgent.includes('Windows') && !window.navigator.userAgent.includes('rv:11.0')) { | |
return; | |
} | |
const $el = $(el); | |
const width = $el.width(); | |
const height = $el.height(); | |
const $svg = $el.find('svg'); | |
if (perspective === 'width') { | |
const ratio = width / $svg.attr('width'); | |
$svg.width(width); | |
$svg.height($svg.attr('height') * ratio); | |
} else if (perspective === 'height') { | |
const ratio = height / $svg.attr('height'); | |
$svg.height(height); | |
$svg.width($svg.attr('width') * ratio); | |
} | |
} | |
// Usage | |
const el = document.querySelector('.lottie-animation'); | |
const animation = lottie.loadAnimation({ | |
container: el, | |
renderer: 'svg', | |
autoplay: true, | |
loop: true, | |
path: $(el).data('source'), | |
}); | |
animation.addEventListener('DOMLoaded', () => { | |
lottieIeFixer(el); | |
}); |
Yes, also this task does not require jQuery at all, who uses that anyway? :P
Updated version: https://gist.github.com/modjke/3b8b3f11490ddf6d1bda18f8a9d44d1a
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I always transpile my JavaScript through Babel so ES6 isn't really an issue.