搜尋
  • estherjan

Exploration with JavaScript Libraries

We started to learn about JavaScript during the second week, and after being introduced to the diversity JavaScript can provide with its countless libraries, we're requested to explore the existing libraries, and to think about what kind of libraries could be useful for our final projects.


From my last exercise creating illustrations in HTML & CSS, I've been really into illustrations and animations, I'm especially interested in incorporating small interactive animations into my personal website.


1. anime.js

I found this library called "anime.js", it seems very powerful in creating dynamic animations embedded on webpages.


Landing page of Anime.js

The most surprising part is one of the examples they showcased on their website that allows animations being created with CSS components, and the effect is quite sophisticated like something I can imagine being created in After Effects.


Layered CSS transforms

Also, in anime.js, it allows users to create interactive control bars that I can already imagine adding some simple interactions with it.


Sample of interactive controls showcased on anime.js website

2. chart.js

Then the second library that I'm interested in is "chart.js", it's a library that allows users to create dynamic data visualizations (even with animations!).


Landing page of chart.js

3. vis.js

Since I want to incorporate some kind of real-time data into my final project, I also searched for JavaScript libraries that can support real-time interactions. Then I found "vis.js", it's a dynamic browser-based visualization library. I'm wondering if I can use vis.js to create preliminary designs to present the data, then incorporate chart.js to make the final effects.


Landing page of vis.js

That's about it! My ideas about my final project is still vague, and I'm hoping to find more time to explore through other possible libraries that I might be able to use in the future.

site logo_new-03.png