To uncover the issue, try opening in both Chrome and Safari browsers. The logo animation should animate one section at a time like it does in Safari, but in Chrome, the animation seems to freeze.
Check out the Snap.svg function responsible for running this animation:
function logo_in() {
logo.animate ({
d: p1
}, 75, mina.easein);
setTimeout(function() {
logo.animate ({
d: p2
}, 75, mina.easein);
}, 100);
setTimeout(function() {
logo.animate ({
d: p3
}, 75, mina.easein);
}, 200);
setTimeout(function() {
logo.animate ({
d: p4
}, 75, mina.easein);
}, 300);
setTimeout(function() {
logo.animate ({
d: p5
}, 50, mina.easein);
}, 400);
};
The variables p0-p5 represent the six stages of the logo animation. It starts with p0 by default and then animates through each stage using setTimeouts.
This method was functioning correctly until recently. What could be causing the logo animation to start behaving awkwardly?