Making impressive websites can be a lot of work. You can get one up in minutes, but the ones that make you say wow take hundreds of hours. I’ll show you one time-efficient thing you can do to wow your users or customers: Creating small vector graphic animations in minutes, which can add a lot to a website.

We’ll look into how to animate svgs (scaleable vector graphics) with Anime.js. We’ll go through two examples together step by step.

Animating elements on websites can be done with different strategies, but JavaScript gives you the most versatility, and composability.


Prerequisites

I tagged this class as “Intermediate”. You’ll do best if you have some prior knowledge of html/svgs, css, javascript, creating vector graphics, and general animation skills. You can probably take it as a beginner in all those fields too and learn those skills along the way. You certainly don’t need deep coding skills.

It’s perfect for designers and developers who want to create engaging websites.

You don’t need any special software for this. I’ll do everything in browser, exporting the svg from Figma. You can also use Adobe Illustrator, any other software, or download svgs from the project resources or other websites.