Today, I’m going to share with you one wonderful resource which fulfills all our animation related needs is anime.js. “anime.js” provide the variety of animations effect, all those effects make our design more attractive. It is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG and many more.
It’s an open source library, you can get that from the GitHub easily. Also, it provides a wonderful documentation with lots of examples. Each example, showing its feature, I’m sure you would like this and use this for your upcoming project. More examples are available on codepen. Those examples help you to for more understanding on anime.js.
# SVG Motion Path Animation Example
In this example, we are animating our SVG path. After applying this animation, It fills a new life in our SVG graphics.
HTML Markup:
<div id="motionPath">
<div class="motion-path">
<div class="small square el follow-path"></div> <svg width="256" height="112" viewBox="0 0 256 112">
<path fill="none" stroke="currentColor" stroke-width="1" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"></path>
</svg> </div>
</div>
Js Code:
var path = anime.path('#motionPath path');
var motionPath = anime({
targets: '#motionPath .el',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 2000,
loop: true
});
Result:
# SVG Line Drawing Animation
In this example, we are animating our SVG lines. This is more effective on the logo or display any or short slogan or etc.
HTML Markup:
<div id="lineDrawing">
<svg viewBox="0 0 280 100">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1" class="lines">
<path d="M58 80V50.12C57.7 41.6 51.14 35 43 35a15 15 0 0 0 0 30h7.5v15H43a30 30 0 1 1 0-60c16.42 0 29.5 13.23 30 29.89V80H58z" stroke-dasharray="316.85528564453125" style="stroke-dashoffset: 316.855px;"></path>
<path d="M73 80V20H58v60h15z" stroke-dasharray="150" style="stroke-dashoffset: 150px;"></path>
<path d="M58 80V49.77C58.5 33.23 71.58 20 88 20a30 30 0 0 1 30 30v30h-15V50a15 15 0 0 0-15-15c-8.14 0-14.7 6.6-15 15.12V80H58zm75 0V20h-15v60h15z" stroke-dasharray="441.1739501953125" style="stroke-dashoffset: 441.174px;"></path>
<path d="M118 80V49.77C118.5 33.23 131.58 20 148 20a30 30 0 0 1 30 30v30h-15V50a15 15 0 0 0-15-15c-8.14 0-14.7 6.6-15 15.12V80h-15zm-7.5-60a7.5 7.5 0 1 1-7.48 8v-1c.25-3.9 3.5-7 7.48-7z" stroke-dasharray="338.3053894042969" style="stroke-dashoffset: 338.305px;"></path>
<path d="M133 65a15 15 0 0 1-15-15v-7.5h-15V50a30 30 0 0 0 30 30V65zm30 15V49.77C163.5 33.23 176.58 20 193 20a30 30 0 0 1 30 30v30h-15V50a15 15 0 0 0-15-15c-8.14 0-14.7 6.6-15 15.12V80h-15z" stroke-dasharray="406.8699035644531" style="stroke-dashoffset: 406.87px;"></path>
<path d="M238 65a15 15 0 0 1 0-30c8.1 0 14.63 6.53 15 15h-15v15h30V49.89C267.5 33.23 254.42 20 238 20a30 30 0 0 0 0 60V65z" stroke-dasharray="301.8561706542969" style="stroke-dashoffset: 301.856px;"></path>
<path d="M260.48 65a7.5 7.5 0 1 1-7.48 8v-1c.26-3.9 3.5-7 7.48-7z" stroke-dasharray="47.128875732421875" style="stroke-dashoffset: 47.1289px;"></path>
</g>
</svg>
</div>
Js Code:
var lineDrawing = anime({
targets: '#lineDrawing .lines path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
direction: 'alternate',
loop: true
});
Result:
Hope you like this resource. Feel free to comment if any query. You can also share your resource with us using Join Us form.
If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee