Misc
// hide show password if ( document.querySelectorAll(‘.toggle-password’) ){ let hideshowpassbtns = document.querySelectorAll(‘.toggle-password’); hideshowpassbtns.forEach(item => { item.addEventListener(‘click’, e => { let toggleId...
JavaScript
Variables declared in the self executing function only exists within the scope of self executing function and not outside of it. so you can decare and write code without worring of it’s effect on other blocks of code. Also this type of function is only effective...
SVG Animation
You can apply the following css to your SVG to animate it. For eyes, you will need to measure transform-origin i.e. distance of the center of each eye from the top and leftmost part of the SVG. /* Keyframes */ @keyframes eyes { 0%{ transform: scale(1,1); } 27.5%{...
SVG Animation
CSS @keyframes eyelids { 0%{ transform: translateY(0px); } 27.5%{ transform: translateY(2px); } 30%{ transform: translateY(2px); } 35%{ transform: translateY(0px); } 45%{ transform: translateY(0px); } 100%{ transform: translateY(0px); } } #left-eyelid, #right-eyelid...
JavaScript
How to know the length of the path in SVG to animate it with the stroke offset method? Well, the answer is very simple. Just use the following JavaScript and update its selector to that of the path you want to calculate the length of. Check the length value in the...
Blog