Most of the animations we’re familiar with focus on the interface: dropdown menus, tabbed buttons, and slideshows are common examples.
Note this library is pretty tough to work with. You should be familiar with basic frontend coding before tinkering with Mo.js on your own. However, there is a lot you can pick up just by studying the live demos and digging into some of the source code.
Have a peek at the main GitHub repo if you wanna see some demos in action.
There’s a whole list of links from CodePen all featuring live Mo.js demos. These include fullscreen page animation loaders, click-to-animate microinteractions, and tons of shape manipulations.
For example, this pen creates a pretty crazy microinteraction from user input(just click anywhere inside the pen to see it).
Some of these pens may feel over the top but these aren’t just JS animations. They’re really like works of art.
These demos prove just how far we’ve come with animation on the web. The fact that anyone can create these effects using only frontend code is simply incredible.
Either way, this is one of my favorite animation libraries to date. It offers so much control that you just cannot find anywhere else. And it’s helping to bring microinteractions from mobile apps into web design.
The post Mo.js – A Complete Motion Graphics Library For The Web appeared first on Hongkiat.WordPress Website Development