DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for I Built An Animation Tool With Angular!
Mẑnh Đẑt
Mẑnh Đẑt

Posted on

I Built An Animation Tool With Angular!

Motivation to create

Recently, I blogged more than I used to. Most of the posts are tutorials.

I tried to add images, diagrams when possible. However, I think videos work best when describing procedures.

Diagrams are cool but it would be even more awesome if objects on diagrams can move :D.

So I created a tool to do just that: Helps me create videos to explain processes quickly.

You may say: Hey, there are many great video tool out there that you can learn in a few hours and they can do more than what you need!

Yes, I know. Great tools (even free) are out there but being able to create something outweigh all reasons.

I ended up spending mostly a week creating the first "usable" version.

The app

So here it is:

Image description

https://vanim.datmt.com/

I created a video showing how to use the app here:
https://www.youtube.com/watch?v=RE6RbT69VS0

You can go there and start playing with the tool. You can create some shapes, use images to create moving diagrams...

Here is one example I created to explain the concept of CountDownLatch in Java

Future of the app

I have some ideas in mind. The main purpose is to make creating videos even easier. I know the app is primitive now but I can now create some nice animation for my blog :).

Your suggestions are highly appreciated!

Special thanks

This app is not possible without the following projects:

  • Fabricjs http://fabricjs.com/: It is the engine that run the app. Thanks!
  • Jenkins: Thanks to this awesome projects, I can literally push new changes online in just a single click.

Thanks for your attention. Have a great weekend and hope you have fun creating new things!

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await