Open Source Animation Library

The Open Source Animation Library (OSAL) is an open source flip book animation application for creating presentations with interactive story structures. These presentations are created by importing a simple XML file, which can include addition variables to be used in the final video. OSAL is designed to draw attention to a specific event or information through animation and sound, making it ideal for any educational or marketing presentation.

Open Source Animation Library (OpenSANi) is a set of C++ implementations of open-source animation libraries and an interface to create, view, edit and playback animated scenes. OpenSANi focuses on common application tasks like image loading, deformation processing and rendering based on OpenGL. The main goal of the library is to offer an easy-to-use open-source solution for creating, viewing, editing and playback of animated scenes with many different looks for processes such as deformation and rendering.

Animate CSS

Perhaps the definitive resource for web animation is Animate.css. This open source library was released quite a few years back and it’s still more relevant than ever.

Developer Daniel Eden created this project as a simplified way to add custom CSS3 animations onto a webpage. Over the years it has grown into a fully-fledged animation library with enough power to run on any major project.

The homepage offers plenty of demos so you can test out the animation styles and see what you think. Plus there’s a bunch of great documentation on GitHub including a list of classes and some example code snippets.

04-animate-css

Mo.js

Mo.js is an excellent library for adding JavaScript-based motion graphics to your website. It is very fast and produces smooth animations that look great on all kinds of devices. It is also modular, so you can avoid extra overhead if you only want to use specific components.

The library has a declarative API which is used to set the value of different properties for the components that you create. It comes with four different built-in modules called Html, Shape, ShapeSwirl, and Burst. The bursts and swirls can be used creatively for all kinds of user interactions with elements on your website.

https://codepen.io/tutsplus/embed/ZEewrNx?height=447&theme-id=light&default-tab=result

Try clicking anywhere in the above CodePen and you will a nice little burst of circles and stars. It was created by LegoMushroom using the Burst and Shape module in mo.js.

The documentation of mo.js provides a lot of such interesting examples that can help you learn all aspects of the library.

Tuesday

The one thing I like most about Tuesday is the simplicity of these animations. With this library you control how elements appear and disappear from the page.

But these animations are not over-the-top or super glamorous. Instead they pack a nice subtle punch that really improves the page aesthetic, but doesn’t detract from the content or the user experience.

I haven’t seen many websites using Tuesday but it is perhaps the cleanest library out there.

It runs on pure CSS and the animation styles are so darn reasonable. They can blend with any site and you’ve got over a dozen fade in/fade out styles to work with.

05-tuesday-css-animation

CSShake

CSShake is a library of CSS-powered animations that revolves around making UI elements shake—you read that right! The library comprises a wide range of CSS classes to enable you to create different animated shake elements throughout your project. So, you will have no problem finding a ‘shake’ preset that best suits your needs.

Notably, the ‘shake animation’ pattern was made popular by Apple’s iOS. It is seen when an iOS user enters incorrect credentials into an input field or tries to perform an action that is not permitted by the system. More recently, shake animations have become a standard in interaction design.

Generally, these animations are created using keyframes and the transform property. Though sometimes bizarre, they are hard to ignore. And, if you want to create animated shake effects in React, check out Reshake.

Three.js

JavaScript animation libraries: Three.js

Three.js tops this list of JavaScript animation libraries with 60K+ stars on GitHub. It’s dependent on WebGL to create and render 3D animations in the browser.

There’s a ton of documentation to help you, and once you get past the learning curve, there’s not much you cannot accomplish using this library. Firstly, using the Three.js editor, you create a scene. Thereafter, you get to add geometrical figures, and adjust lighting and camera. The material, texture, object, color and fogging can all be tweaked, and the final file published to your project.

Bounce.js

With Bounce.js you can make powerful CSS3 and JS animations with just a few clicks.

On the homepage you’ll find a custom animation builder with a focus on modules first. This way you can add the specific animation features you want onto the page without adding extra code.

The biggest difference with Bounce.js is that it doesn’t work as just a library. Although you can find setup info on GitHub, it’s not just a basic script. It actually comes with a web builder so Bounce is one of the few animation libraries you can stylize in your browser.

09-bounce-js-script

Hover.css

Hover.css is an animation library of CSS3-powered hover effects to give some life to your website’s buttons, logos, links, and other UI elements. Similar to Animate.css, the library comprises a wide range of 2D transitions and pretty much fits into any interaction project. More specifically, this library is used when creating appealing UI button interactions.

Using Hover.css is as simple as copying and pasting the desired effect in your stylesheet or referencing the entire stylesheet altogether. Then, add the CSS class name to the element you want it applied to. Similarly, many of its effects use CSS3 features such as transformations and transitions.

It is also important to note that old browsers may not support these features and may need some extra attention to ensure the feedback hover effects are still in place.

GreenSock JS

GreenSock

GreenSock’s GSAP works with a set of small JavaScript files that make animations look great in all major browsers. It smoothly chains multiple animation properties and eliminates browser bugs.

GSAP actions include creating animations on Canvas and animating any object in a scene. Also progressively revealing, morphing or moving any object along a path. For this purpose, it works with a bunch of software applications like SVGPlugins, PixiPlugin, WebGL, Adobe Animate and EaseJS. Its modular structure helps you choose just the functions you need. With 8 million users and 10K+ stars on GitHub, this powerful library has a lot going for it.

Conclusion

Looking for an open source animation library, a reference implementation of a sprite sheet animation tool with a user interface written in Swing? Try out the Open Source Animation Library , and give it your feedback.

0 Comments

No Comment.