I am working on a circular design made up of 12 arc segments and would like to create a smooth transition from the start pattern to the end pattern for the user to view. There will be multiple start and end patterns to showcase.
Check out my current code here:
http://codepen.io/blazerix/pen/jrwNAG
function playAnimations(){
var totalLength = document.getElementsByClassName("container")[0].children.length
for(var i = 0; i < totalLength; i++){
var current_pattern = document.getElementsByClassName("container")[0].children[i]
console.log(current_pattern)
for(var j = 0; j < 12; j++){
$('#LED' + (j+1) ).css('transition-duration', '0s');
$('#LED' + (j+1) ).css({fill: current_pattern.children[1].children[j].style.backgroundColor});
}
setTimeout(function () {
for(var k = 0; k < 12; k++){
$('#LED' + (k+1) ).css('transition-duration', "" + current_pattern.children[3].children[0].value + "ms");
$('#LED' + (k+1) ).css({fill: current_pattern.children[2].children[k].style.backgroundColor});
}
}, 150);
}
}
The outer loop iterates through all the patterns, while the two inner loops handle the start and end patterns respectively. However, only the animation of the last pattern is being displayed and I suspect it's due to the quick execution of the code. I'm unsure of how to solve this issue. Any suggestions or tips on resolving this problem are welcome.