I have some path animations on a page and they work fine in all browsers except IE10/11. However I have some much more simpler animations doing the same thing on other pages, just with fewer of them, using pretty much the same code and they seem okay.
I think it may well be a performance bottleneck or so associated with IE.
If you view http://ift.tt/1IRIjK2 in IE10/11 you'll see there is quite a noticeable problem where the svgs appear glitchy or not fully rendered. Can't quite figure out what it is.
The relevant JS code from codepen:
var cfg = {
easing: [0.165, 0.84, 0.44, 1],
duration: 1200,
delay: 500,
layerDelay: 7000,
width: 28,
positioning: true,
colors: [
'#027CA5',
'#75B5C6',
'#00FFD0',
'#00B994',
'#BEF5FE'
]
}
$('.shape-layer').each(function(i) {
var $this = $(this);
setTimeout(function() {
var $paths = $this.find('path');
strokeSetup($paths);
strokeOut($paths);
}, cfg.layerDelay * i);
});
function strokeSetup($el) {
$el.each(function(i) {
var $this = $(this),
pLen = Math.ceil($this.get(0).getTotalLength());
$this.css({
'stroke-dasharray': pLen,
'stroke-dashoffset': pLen,
'stroke-width': cfg.width
});
});
}
function strokeOut($el) {
var pathCount = $el.length,
iterationCount = pathCount;
$el.each(function(i) {
var $this = $(this),
pLen = Math.ceil($this.get(0).getTotalLength()),
color = cfg.colors[getRandom(0, cfg.colors.length)];
setTimeout(function() {
$this.css({
'stroke': color
});
if (cfg.positioning) {
var side = ['top', 'bottom', 'left', 'right'],
cssO = {};
$this.parent().css({
top: 'auto',
bottom: 'auto',
left: 'auto',
right: 'auto'
});
cssO[side[getRandom(0, 1)]] = getRandom(0, 40) + '%';
var firstPos = cssO[Object.keys(cssO)[0]],
sideAmount = (parseInt(firstPos) < 20) ? 100 : 20;
cssO[side[getRandom(2, 3)]] = getRandom(0, sideAmount) + '%';
$this.parent().css(cssO);
}
$this.velocity({
'stroke-dashoffset': 0,
}, {
duration: cfg.duration,
easing: cfg.easing
});
if (!--iterationCount) {
strokeIn($el);
}
}, cfg.delay * i);
});
}
function strokeIn($el) {
var pathCount = $el.length,
iterationCount = pathCount;
$el.each(function(i) {
var $this = $(this),
pLen = Math.ceil($this.get(0).getTotalLength());
setTimeout(function() {
$this.velocity({
'stroke-dashoffset': pLen
}, {
duration: cfg.duration,
easing: cfg.easing
});
if (!--iterationCount) {
strokeOut($el);
}
}, cfg.delay * i);
});
}
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Aucun commentaire:
Enregistrer un commentaire