visual-studio-code-snippet.json

"Animated icon": {
	"prefix": "anic",
	"body": [ "<!--${1:id} animated icon begins-->",
"<div id='icons8-${1:id}' class='bodymovin'></div>",
"",
"<script>",
"",
"   (function() {",
"   var anime;",
"   var state = 0;",
"   var name = '${1:id}';",
"",
"   function start() {",
"       if (state % 2 == 0) {",
"           // All animations have 28 frames:",
"           // - First 14 ones for changing the satate",
"           // - And the next 14 back to return to the original state",
"           anim.playSegments([0, 13], true);",
"       } else {",
"           anim.playSegments([14, 27], true);",
"       }",
"       state++;",
"   }",
"",
"    $(document).ready(function () {",
"    // Feel free to handle any other events here, not just click or hover",
"        $('#icons8-'+name).click(start);",
"        $('#icons8-'+name).hover(start);",
"",
"        anim = bodymovin.loadAnimation({",
"            container: document.getElementById('icons8-'+name),",
"            renderer: 'svg',",
"            loop: false,",
"            autoplay: false,",
"            path: 'icons/'+name+'.json'",
"        });",
"    });",
"    })();",
"",
"</script>",
"<!--${1:id} animated icon ends-->"]
}

}