Hey everyone! Today I'm putting together a list of my favorite JavaScript libraries out there. For this post, I'm focusing on cool, small, design-focused libraries, not entire frameworks like React, Node, etc. Similarly to my post about my favorite design tools and generators, this list is in no particular order!
Particles.js is a library for generating cool, animated, and interactive particle effects. I've been using this one on my website's homepage for the last two years, so you can check it out there! There's a lot you can do with it if you're creative with the settings. I've written a guide for using this one in Oxygen Builder which you can find here.
TypedJS is for creating some animated text that looks like it's being typed on a keyboard. For reference, I am also using this one on my site right now in the top left corner and have been for the last two years!
Morphtext is another library for animating text. This one is based on the open-source animate.css that a lot of other libraries use and makes it easy to rotate some words in and out with nice animations.
TwentyTwenty is my favorite before/after slider. It stacks the two images on top of each other then gives the user a slider bar that they can drag left and right to reveal/hide the other image. It looks great and works great!
FullPage changes how scrolling works on your site. You basically turn the site into pages to scroll through rather than one solid page. One scroll down of the wheel will scroll you to the next page and so on. This one isn't free, but it isn't expensive either.
Masonry is a grid layout library that automatically moves and resizes elements around optimally to fit the space they're in. This is a great way to show a list of blog posts or cards of some sort.
GreenSock is an exceedingly easy way to add staggered / scroll-driven animations to your site. It does a lot more than that in the world of animation as well, but I haven't explored farther than the staggered / scroll-triggered animations.
Chart.js is a cool and easy way to make a few different types of charts that can be interactive and animated.
Tippy.js makes it super easy to add tooltips to any element on your site. You can have this set up in seconds.
Lightbox is exactly what you think it is. It's the original lightbox script for adding a lightbox effect to an image. If you don't know what lightbox means, basically, when you click on the image it will open up a bigger version of the image for the user to look at.
