What is the best alternative to Anime.js?

Question

Built By the Slant team

Find the best product instantly.

Lustre recommends the best products at their lowest prices – right on Amazon.

4.7 star rating

Add to Chrome

Try it now - it's free

score 285 · Answer 1

D3.js

Top Con

Steep learning curve

The complexity and flexibility of D3.js results in it being a time-consuming tool to learn for many users. D3 is incredibly flexible; probably more so than any other JavaScript visualization library at the time of this posting. With that flexibility comes increased complexity. If you just want to create some quick charts you will get results faster with something else. See More

Top Pro

Huge number of examples online

Most of the examples provided are by the author, but there's also a great community writing plugins and more examples. See More

Top Con

"Selections" are elegant, but somewhat hard to grok

Selections are core to working with D3 beyond the basics. They're powerful and useful, but require new developers to get up to speed (e.g. set aside 30m to read and digest: https://github.com/mbostock/d3/wiki/Selections) and if used in the context of a larger application will result in a portion of the code using different patterns than the rest, requiring a translation layer in between. See More

Top Pro

Large community

D3.js is a very popular tool with an active community, resulting in plenty of learning resources and fast responses to questions. See More

Top Pro

Doesn't require a proprietary framework

D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework. See More

Top Pro

Versatile library for manipulating data on the DOM

Top Pro

Very flexible join paradigm

Can be tricky at first, but once learned, data manipulation and binding can easily generate complex visualizations for massive amounts of data. See More

Top Pro

Great for highly interactive scenes

D3.js offers incredible levels of interactivity. See More

Top Pro

Backwards compatible

D3.js is intended for modern browsers, so supports IE9 and above (IE8 with an additional library) as well as all the other modern browsers. See More

See All Experiences

285 58

score 46 · Answer 2

p5.js

Top Pro

Accessible documentation

Reference documentation and lots of examples are available directly on the website. See More

Top Con

No built-in rendering

If looking for something to build UIs with or similar, one might be disappointed by the lack of any pre-defined UI element objects and such in p5.js. One has to write all the rendering code for any objects one includes, integrating it appropriately with the loop. See More

Top Pro

Great community

p5 users benefit from the Processing community's 15+ years of growth and discovery. Processing code can easily be converted to p5. See More

Top Pro

Easiest to learn to obtain high grade results

In a few days any body can understand extremely complex figures in a few minutes. See More

Top Pro

A lot of YouTube tutorials

Top Pro

General Programming Concepts

As a continuation of the Processing project, this frameworks helps in understanding the general programming concepts that goes beyond drawing (connecting electronics, using sounds or the webcam etc), See More

46 2

score 19 · Answer 3

GSAP

Top Pro

Mature

It's been around a long time, from back in Flash days. See More

Top Pro

Fast

It has always stressed performance. See More

Top Pro

Lightweight

It's always stressed file size. There are different versions available to balance features and weight. See More

19 1

score 3 · Answer 4

Move.js Ok

Top Con

Seems dead

Latest commit is dated November 30 2015. The last pull request that was closed is dated September 25 2015. See More

Top Pro

Simple to use

Move.js is just a simple JS layer on top of CSS3 animations. It's pretty easy to use because it just exposes an API with which you can use CSS selectors and props to animate objects. See More

Top Pro

Lightweight

Move.js is extremely small and lightweight (only 13KB) JavaScript library. See More

3 0

score 17 · Answer 5

Snap.svg

Top Pro

Pure SVG library

Top Con

Not actively developed

During 2016 was few updates, more updates in 2017 See More

Top Pro

Written by a SVG Guru and pioneer

Dmitry Baranovskiy also wrote Raphael (project now owned by Sencha), this is the updated modern version of that library. Dmitry also is a champion directly affecting the future of SVG standards with W3C See More

Top Con

Spotty exporting

Exporting doesn't work well (if at all sometimes) with SVGs exported from anything other than Adobe products. See More

Top Pro

Backed by Adobe

Adobe is backing the development of snap.svg See More

Top Con

Weak documentation

Explanations provided in the documentation can often be unclear, with some features missing from the documentation all together. See More

Top Pro

Features

Supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more See More

See All Experiences

17 2

score 2 · Answer 6

animo.js

Top Pro

Few dependencies

The only dependency Animo has is jQuery. The source also includes animate.css as a stylesheet, but you can always add yours if you wish to do so. See More

Top Con

Development seems slow

From their Github repo it seems that development is going pretty slow. Issue reports are still getting answered but the latest commit to the master branch happened more than 6 months ago. See More

Top Pro

You can get personal help from the development team by paying

The animo.js team offer the option to contact and get help personally from the dev team by paying an amount of money (2 days for $5 2 weeks for $30 Lifetime for $100). Alternatively, being an open source project you can still open an issue and get help from other developers that use this library. See More

Top Pro

Includes CSS animation library out of the box

Animo.js has a CSS animation library (animate.css) included by default, which provides developers with 60 pre-made CSS animations where they can choose from. See More

Top Pro

Open source

Animo.js is a free and open source tool. See More

2 0

score 41 · Answer 7

Fabric.js

Top Pro

Out of the box Node.js support

Fabric supports node.js, and has an npm package available for server side rendering with all the dependencies handled for you. This allows you to provide graceful degradation for image fallbacks to canvas or SVG content. See More

Top Con

No front-end only version via Node

NPM package has major dependencies. See More

Top Pro

Outputs to canvas and SVG and JSON

When it comes to format compatibility, Fabric is the best, with the ability to output to Canvas, SVG, and JSON. SVG provides backwards compatibility for older browsers, and JSON allows you to store rendered output for later use. See More

Top Con

A little bit less support for Angular.js

https://github.com/michaeljcalkins/angular-fabric See More

Top Pro

Vector focused API

Drawing objects in fabric are vector focused, so everything is easily transformable. It makes it easy to create complex pathed shapes, add gradients, or filters. Although fabric is great for vector rendering, it also has image support as well. See More

Top Pro

Great interaction with SVG, excellent coding

If you are about to customize the library to your needs, this is the project of choice! Great programming work! See More

Top Pro

Good support for SVG multi-line text

Allows creating multi-line text that can even be interactively edited by user interaction. See More

Top Pro

Browser only version now available

If the node-canvas dependency is a problem you can now look for npm install fabric@x.y.z-browser See More

See All Experiences

41 8

score 17 · Answer 8

Shield UI Charts

Top Pro

Many chart types available

There are more than 20 types of charts available for use. See More

Top Con

Commercial

Pay by developer starting from 349$. See More

Top Pro

Wrappers for ASP.NET, ASP.NET MVC and Apache Wicket

Each chart can be implemented to ASP.NET and ASP.NET MVC applications, with detailed documentation and guides for each. See More

Top Pro

Good documentation

Each of the available charts has documentation and guides available for every different implementation (JavaScript, ASP.NET etc.) See More

Top Pro

Interactive charts

The charting widget is built to facilitate client side interactions and notifications. See More

Top Pro

Out of the box pan-and-zoom

Zoom-in on specific points of interest on the graph with the mouse – a single property allows this out-of-the-box. See More

Top Pro

Supports combining different charts

You can combine different charts (they can be of the same type or even different types of charts) to display data correlations. See More

See All Experiences

17 4

score 36 · Answer 9

Pixi.js

Top Pro

Supports WebGL w/ canvas fallback

Pixi is a WebGL renderer, but can fall back to canvas if WebGL is not supported or turned off. See More

Top Con

Not a complete solution

Pixi only provides the renderer. See More

Top Pro

Will be familiar to ActionScript developers

Pixi.js uses a code structure that's very similar to ActionScript. See More

36 8

score 52 · Answer 10

Paper.js

Top Pro

Behaviours handled by objects

Objects in Paper make it easy to extend parent objects and run constructor functions without having to worry about JavaScript prototypal inheritance. Because of this it is easy to make compound drawing objects with their own instance variables and behaviors. Example: each swimming tadpole follows its own behavior These features make it easier to create objects that can act autonomously with complex behaviors. This makes Paper a good choice for particle effects and game development. See More

Top Con

Limited to single instance

The code is written in a way that everything is global and limited to a single instance, there is no clean way to use 2 separate instances in the same page See More

Top Pro

Operator overloading

It is written in a language nearly identical to JavaScript, but adds helpful operator overloading to allow you to perform coordinate arithmetic. See More

Top Con

Not supported in older browsers

Paper.js runs on top of HTML5 Canvas, which is not supported in older browsers. See More

Top Pro

Object constructors

Elements all have the option of being created with a hash of properties which promotes clean, concise, and contextually local coding practice. See More

Top Pro

Good for making games

Paper uses a frame based approach to rendering the canvas. This makes it conceptually easier to create objects with animations and behaviors that interact and perform with other objects. Along with Paper's approach to creating and managing objects this makes Paper especially good for creating applications with complex behaviors with many elements doing different actions at once, and makes it a good choice for making games. See More

52 11

score 46 · Answer 11

Raphael

Top Con

Complicated, confusing documentation

The documentation is often not clear and lacks practical examples. See More

Top Pro

Works with older browsers

Because Raphael supports rendering VML + SVG, it is one of the few drawing libraries that is backwards compatible with older browsers that do not support canvas. See More

Top Con

Can be difficult to get support

Online communities for Raphael are small and inactive compared to other drawing libraries, and many issues opened on github are never addressed. See More

Top Pro

Built in animations

Several built-in animations (such as ways of easing) are provided for you out of the box, but Raphael also allows cubic beziers for more complicated easing functions. Any drawing object property can be modified making it similar to css animations in jQuery. See More

Top Pro

Every object is interactive with events

Everything that is drawn in Raphael is an object which means it is easy to manipulate any part of the rendered image after it is processed. It uses an event handler system for user inputs which makes it easy to learn for JavaScript developers used to event based libraries. An interactive chart demo. This style of handling objects makes Raphael a good fit for rendering interactive diagrams and charts that can also interact with other parts of the page. See More

Top Pro

Easy creation of charts with extension

gRaphael is a Raphael extension to help you easily create graphs and charts. See More

46 11

score 55 · Answer 12

Three.js

Top Pro

Feature rich

Effects: Anaglyph, cross-eyed and parallax barrier. Scenes: add and remove objects at run-time; fog Cameras: perspective and orthographic; controllers: trackball, FPS, path and more Animation: armatures, forward kinematics, inverse kinematics, morph and keyframe Lights: ambient, direction, point and spot lights; shadows: cast and receive Materials: Lambert, Phong, Standard, smooth shading, textures, PBR and more Shaders: access to full OpenGL Shading Language (GLSL) capabilities: lens flare, depth pass and extensive post-processing library Objects: meshes, particles, sprites, lines, ribbons, bones and more - all with Level of detail Geometry: plane, cube, sphere, torus, 3D text and more; modifiers: lathe, extrude and tube Data loaders: binary, image, JSON and scene Utilities: full set of time and 3D math functions including frustum, matrix, quaternion, UVs and more Export and import: utilities to create Three.js-compatible JSON files from within: Blender, openCTM, FBX, Max, and OBJ Support: API documentation, public forum Examples: Over 150 files of coding examples plus fonts, models, textures, sounds and other support files See More

Top Con

Lack of versioning system means that the API changes frequently

Three.js releases a new revision about once a month, and the API can change at any time. This means that a lot of third party help found online is out of date. See More

Top Pro

Well documented

The documentation is detailed, providing clear explanations and code samples of the various features. There are also hundreds of examples available. See More

Top Con

Weak visual tools

Three.js has its own editor but it has been weakly developed. It does not support a lot of engine features. See More

Top Pro

Fallback canvas rendering

Three.js offers a canvas renderer as a fallback when WebGL is not available. See More

Top Pro

Helpful and friendly community

Thanks to the recently introduced forum, it is easy to find a community of helpful developers. See More

Top Pro

Actively developed

Three.js has great project health, with activity on Github daily for bug fixes and new features. See More

Top Pro

Hundreds of officially maintained plugins, extensions, control systems, importers, exporters and special effects

The core of the three.js system is kept to a minimum to reduce file size, however there are also hundreds of extensions maintained in the offical repo on github, along with many free textures, fonts and models. You can find them all here. See More

Top Pro

Support for special effects and postprocessing

Three.js support many special effects and post-processing filters including particles, lensflare, sprites, real time reflection and refraction and even area based lighting. See More

Top Pro

Support for physically based rendering

With the introduction of the new MeshStandardMaterial, three.js support physically based rendering (PBR) out of the box allowing for real life quality material and lighting. See More

Top Pro

Support for most industry standard file formats

Three.js has importers for most of the industry standard files format (obj, mtl, fbx, 3ds, gltf, collada, babylon, playcanvas, stl, vrml, draco and many more), making it easy to author assets in your favourite modelling software and import them for use them in three.js. See More

See All Experiences

55 14

score 27 · Answer 13

GraphicsJS

Top Pro

Powerful line drawing

Not only Bezier curves but also any lines, shapes, arcs, etc. out-of-the-box. See More

Top Pro

Convenient API

Clear and concise API with chaining support. See More

Top Pro

Virtual DOM

Rapid drawing. Only what is necessary is drawn. See More

Top Pro

Has its own transformation engine

No need to use embarrassing in-browser transformations. See More

Top Pro

Legacy browser support

IE6+. See More

Top Pro

Smart layering system

With z-index. See More

Top Pro

Rich text features

Multiline text support, text measurement, wrap, indent, spacing, align, etc. See More

Top Pro

Full accessibility (Section 508)

Top Pro

Events support

All browser events are dispatched in the same way in virtual DOM structure also. See More

See All Experiences

27 8

score 3 · Answer 14

Famous

Top Con

Dead project

Famous has been abandoned and will not get updates or bug fixes anymore. See More

Top Pro

3D physics engine

Famous offers a 3D engine through via WebGL. This engine is very similar to those found in videogame engines. See More

Top Pro

Amazing performance

Famous makes it possible to create animations through DOM and WebGL that are up to 60FPS. In other words, the Famous engine is able to create native animations inside the web browser. See More

Top Pro

Open Source

Famous is a free and open source project released under the MIT License. See More

Top Pro

SEO friendly

Since Famous renders on DOM (as well as WebGL) it's SEO friendly, because web crawlers can read everything that's rendered on the DOM. See More

3 1

score 2 · Answer 15

PERGOLA

Top Con

Commercial license

PERGOLA does not offer a free version. The price for a single developer to use PERGOLA is 400 €. See More

Top Pro

HTML

Pergola runs seamlessly in an HTML environment (option in configuration file). All the examples are provided both as SVG standalone and embedded in HTML, and are strictly equal. Besides its universal Node Helper (http://www.svgmagazine.com/jul2011/dom-helper.html) Pergola also provides the equivalent for building HTML nodes and <foreignObject> HTML nodes. See More

Top Pro

SVG native

The first and most accomplished SVG native library, 100% cross-platform compatible. See More

2 1

score 0 · Answer 16

Paths.js

Top Pro

Just helps building graphs, complements template engines or data-binding libraries

Can be used together with a template engine such as Mustache or Handlebars to display SVG graphics or instead of a static template engine, you can use a data binding or MVC/MV* library, such as Ractive.js, Angular, Mithril or Facebook React. See More

Top Pro

3 APIs for the price of one

3 APIs of increasing abstraction: Low-level (svg paths) Basic shapes (Polygon, Rectangle, Bezier, Sector, Connector etc..) Basic graphs (Pie, bar, stock, radar, tree, waterfall, sankey etc...) There is no magic, you can have as much control as you want on how you define your graphs, source code very readable. See More

Top Pro

Lightweight

18kb minified. See More

0 0