Open Source JavaScript Animation Software
Sort By:
JavaScript Animation Software
View 97 business solutionsBrowse free open source JavaScript Animation Software and projects below. Use the toggles on the left to filter open source JavaScript Animation Software by OS, license, language, programming language, and project status.
-
Simple, Secure Domain RegistrationRegister or renew your domain and pay only what we pay. No markups, hidden fees, or surprise add-ons. Choose from over 400 TLDs (.com, .ai, .dev). Every domain is integrated with Cloudflare's industry-leading DNS, CDN, and free SSL to make your site faster and more secure. Simple, secure, at-cost domain registration.
-
Gen AI apps are built with MongoDB AtlasMongoDB Atlas is the developer-friendly database used to build, scale, and run gen AI and LLM-powered apps—without needing a separate vector database. Atlas offers built-in vector search, global availability across 115+ regions, and flexible document modeling. Start building AI apps faster, all in one place.
-
1
three.js
JavaScript 3D library
three.js is a lightweight and easy-to-use JavaScript 3D library with its own default WebGL renderer. It works by creating a scene with a camera and a geometric cube, the latter of which is added to the scene. This will become the animated object within the scene. A WebGL renderer is created for the scene and the camera, with an added viewport to the document.body element. Finally, the cube is animated within the scene for the camera. A plethora of examples can be found in the project’s website (https://threejs.org/) which use Canvas 2D, SVG and CSS3D renderers that the library also provides. -
2
anime.js
JavaScript animation engine
anime.js is a lightweight JavaScript animation library that allows you to create complex animations with a single, powerful API. It works with just about anything web-based: CSS properties, SVG, DOM attributes and JavaScript Objects. anime.js makes it easy to create layered and complex animations, and gives you full control of timing and triggering events so they move exactly how and when you want them. It supports some of the latest browsers, and offers plenty of examples and demonstrations to get you animating in no time. Animate everything you want simply and easily with anime.js. -
3
MixItUp 3
Library for animated filtering, sorting, insertion, removal and more
MixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove DOM elements with beautiful animations. MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts and compatible with inline-flow, percentages, media queries, flexbox and more. MixItUp is open source and free to use for non-commercial, educational and non-profit use. For use in commercial projects, a commercial license is required. Most commonly, MixItUp is applied to a "container" of "target" elements, which could be a portfolio of projects, a list of blog posts, a selection of products, or any kind of UI where filtering and/or sorting would be advantageous. Targets can be filtered using any valid selector e.g. '.category-a', and are sorted via optional custom data attributes e.g. 'data-order'. -
4
React Flight
The best way to build animation compositions for React
React Flight is a JavaScript library for UIs built with React that allows you to compose animations and transitions via “flights” where you design a start component, an end component, and the tool handles animating between them. It’s pitched as the “best way to build animation compositions for React” and is inspired by tools such as Principle in the mobile design world. The developer experience emphasises framing: you place elements into Flight.Frame containers, specify key-frames (start and end states), and then trigger animations via APIs (play(), reset()). It supports interactive previewing of frames (via showFrames mode), and integrates (at least at the time) with jQuery/Velocity under the hood (though future versions may remove the jQuery dependency). It’s well-suited for teams creating rich UI transitions, micro-animations and interactive components in React applications. -
Our Free Plans just got better! | Auth0You asked, we delivered! Auth0 is excited to expand our Free and Paid plans to include more options so you can focus on building, deploying, and scaling applications without having to worry about your security. Auth0 now, thank yourself later.
-
5
WOW.js
Reveal CSS animation as you scroll down a page
Reveal animations when you scroll. Easily customize animation settings like style, delay, length, offset, iterations, etc. By default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library. Smaller than other JavaScript parallax plugins, like Scrollorama (they do fantastic things, but can be too heavy for simple needs). Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup. Fast execution and lightweight code, the browser will like it. It just take seconds to install and use WOW.js! Once purchased on UpLabs, you’ll receive a commercial license PDF and be all set to use WOW.js in your commercial applications. If you want to use WOW.js to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. -
6
React Transition Group
Perform animations when a React component enters or leaves the DOM
Exposes simple components useful for defining entering and exiting transitions. React Transition Group is not an animation library like React-Motion, it does not animate styles by itself. Instead it exposes transition stages, manages classes and group elements and manipulates the DOM in useful ways, making the implementation of actual visual transitions much easier. Since react-transition-group is fairly small, the overhead of including the library in your application is negligible. However, in situations where it may be useful to benefit from an external CDN when bundling. A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind. The Transition component lets you describe a transition from one component state to another over time with a simple declarative API. Most commonly it's used to animate the mounting and unmounting of a component. -
7
Vizzu
Library for animated data visualizations and data stories
Vizzu is a free, open-source Javascript/C++ library utilizing a generic dataviz engine that generates many types of charts and seamlessly animates between them. It can be used to create static charts but more importantly, it is designed for building animated data stories and interactive explorers as Vizzu enables showing different perspectives of the data that the viewers can easily follow due to the animation. Create a placeholder element that will contain the rendered chart. The Vizzu constructor has to load Vizzu's WebAssembly module asynchronously to prevent blocking the whole page. Because of this, any method except animate() will throw an exception while the library is not initialized. There is an initializing promise in the Vizzu class, which will resolve when initialization is finished. You can call all methods after this promise is resolved. -
8
Chalk Animation
Colorful animations in terminal output
A Node.js library that provides animated text effects in the terminal using the Chalk library for styling. -
9
simpleParallax.js
Simple and tiny JavaScript library that adds parallax animations
simpleParallax.js is a very simple and tiny Vanilla JS library that adds parallax animations on any image. Where it may be laborious to get results through other plugins, simpleParallax.js stands out for its ease and its visual rendering. The parallax effect is directly applied to image tags, there is no need to use background images. -
Build Securely on AWS with Proven FrameworksMoving to the cloud brings new challenges. How can you manage a larger attack surface while ensuring great network performance? Turn to Fortinet’s Tested Reference Architectures, blueprints for designing and securing cloud environments built by cybersecurity experts. Learn more and explore use cases in this white paper.
-
10
Live wallpapers
For Use With Plastuer For Windows Or Similar Program.
This is a set of Live Wallpapers for use with Plastuer or Wallpaper Engine. Almost all wallpapers can be adjusted by editing the included files excluding video formatted files 'MP4'. NotePad++ is recommended for editing html and other files. *Not all wallpapers have mouse tracking. -
11
Move.js
CSS3 backed JavaScript animation framework
Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant. Increment prop by val, where val is an Number (click several times). Decrement prop by val, where val is an Number (click several times). Set animation duration to n which is a Number or a string such as "4s". Translate x and optionally y axis. Set animation-delay to n which is a Number or a string such as "4s". Move is packaged with a minified version, re-built each release. We can also pass flags to uglifyjs. -
12
Typed.js
A JavaScript typing animation library
Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set. Rather than using the strings array to insert strings, you can place an HTML div on the page and read from it. This allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page. You can pause in the middle of a string for a given amount of time by including an escape character. CSS animations are built upon initialization in JavaScript. But, you can customize them at your will! -
13
jquery-circle-progress
jQuery Plugin to draw animated circular progress bars
jQuery Plugin to draw animated circular progress bars. -
14
jqueryrotate
Plugin to rotate images by any angle cross-browse with animation
jQueryRotate, a plugin to rotate images by any angle cross-browse with animation support. This project allows you to simply rotate images by any degree. It uses CSS3 where applicable and falls back to a CANVAS (old Firefox, some less-known browsers) or VML (IE6) solution where possible. It also gives a simple interface to animate rotation. Keep in mind that the primary usage of this plugin is to only rotate "IMG" elements, however the experimental version of the plugin (ver.3) also rotates other elements (yet does not support so many older browsers). -
15
lightgallery.js
Full featured JavaScript image & video gallery
lightgallery.js uses CSS-only approach for resizing images and videos. So it will be extremely flexible, and considerably faster than using the JavaScript approach. lightgallery.js comes with a few built in modules, such as thumbnails, full screen, zoom, etc. It is easy to create your own modules, as well as detach modules that you don't want to use. lightgallery.js supports touch and swipe navigation on touchscreen devices, as well as mouse drag for desktops. This allows users to navigate between slides by either swipe or mouse drag. lightgallery.js comes with a numerous number of options, which allow you to customize the plugin very easily. You can easily customize the look and feel of the gallery by updating SASS variables. You also have the option to enable animated thumbnails from the settings. otherwise normal thumbnail will be used. You can also make thumbnails automatically load for your YouTube or Vimeo videos. -
16
react-native-animatable
Set of animations and declarative transitions for React Native
Declarative transitions and animations for React Native. To animate things you must use the createAnimatableComponent composer similar to the Animated.createAnimatedComponent. The common components View, Text and Image are precomposed and exposed under the Animatable namespace. If you have your own component that you wish to animate, simply wrap it with a Animatable.View. To make looping animations simply set the iterationCount to infinite. Most animations except the attention seekers work best when setting direction to alternate. You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap, all animated, all declarative! If you don't supply a duration property, a spring animation will be used. Transitions require StyleSheet.flatten available in React Native 0.15 or later. If you are running on anything lower, please polyfill as described under imperative usage. -
17
Music + Video + Animation Maker & App
Why Music + Video + Animation Maker & App is Fun?
Javaimagephp All-in-one video/film editor or maker makes sense as simple to use app for video/film or movie editing and animations/slideshows. It gets most of your imagination of an All-in-one video/film Animation editor / maker App. Video editing is made intuitive and simple. Lots of Special Effects ( > 55) ! For example this one http://ogena.ridoua.nu Formats supported are mp4, avi, flv, mov, flv and more. Description given image animation which seeks audio given a description. Visualization (Slideshow / Animation) of Streams (Radio: asx, pls, m3u etc.) and News Feeds (RSS, XML) This Program is protected by 1st abstract & reg. International and root sec. laws as is comes free of use like that. Give your answers alike vaks@ccwf[.]cc[.]utexas[.]edu about Ani Magix or issue your activation phase of performer@df(.)lth.s(e) -
18
Ant Motion
Animate specification and components of Ant Design
Ant Motion is a motion design specification from Ant Design, and also provide a complete solution with lots of out-of-box animations for your React applications. Use Ant Motion to quickly use animations in the React framework. We offer single, combined and complete animations solutions. In the React framework, you only need a simple piece of code to achieve animation effects, which can improve your work efficiency. With more friendly interaction, let the animate shuttle between different elements, so that the product can better talk to the user. -
19
CSS Inspiration
Curated collection of interesting, creative, or inspiring CSS effects
CSS-Inspiration is a living gallery of modern CSS effects and components that highlights what’s possible with pure CSS and minimal markup. The collection ranges from micro-interactions and loaders to 3D transforms, complex backgrounds, hover states, and text effects, each presented as a small, self-contained demo. Source code is front and center, encouraging developers to study, copy, and tweak snippets for their own projects. Many examples lean on contemporary features—custom properties, filters, blend modes, gradients, and keyframes—serving as both inspiration and a practical cookbook. Because each demo focuses on a single idea, it’s an effective way to learn new techniques without wading through a full framework. The project thrives on experimentation and community interest, making it a frequent reference for designers, front-end engineers, and educators who want visually striking yet lightweight solutions. -
20
CSS Loaders
A collection of loading spinners animated with CSS
css-loaders is a collection of simple, reusable loading spinners and indicators implemented entirely in CSS. The project offers a variety of designs—spinning circles, bouncing dots, bars, and pulse animations—that can be applied to any element with a few classes. Each loader is built using CSS keyframes and transforms, avoiding images or JavaScript, which keeps them lightweight and responsive. Because they are pure CSS, they scale cleanly at different sizes and can be styled easily with color or shadow overrides. Developers can copy snippets directly into their projects without needing to install heavy dependencies. These loaders are widely used in web apps and prototypes to communicate background activity or waiting states to users in a visually pleasing way. -
21
Javascript animation authoring environment. A WYSIWYG cross-platform desktop application using jQuery to animate XHTML and HTML elements. Its built in XUL.
-
22
Effeckt.css
A Performant Transitions and Animations Library
Effeckt.css is a showcase and toolkit of high-performance UI transitions and animations for the web. It catalogs common interaction patterns—button states, list reveals, modals, off-canvas menus, and page transitions—implemented with CSS transforms and opacity for smooth, GPU-friendly motion. The project focuses on practical details such as using compositing-friendly properties, keeping DOM structures lean, and providing hooks so JavaScript can toggle classes without micromanaging animation state. Each effect is isolated, documented, and demoed, allowing designers to copy just what they need rather than dragging in a monolithic framework. By standardizing names and behaviors, it helps teams keep motion design consistent across a product while remaining easy to theme. The library doubled as a learning resource during the rise of CSS animations, showing how to achieve polished interactions without heavy JavaScript. -
23
A web based flash authoring tool, based on ajax animator and OnlyPaths , with new server model and different enhancements plus the support of collaborative editing
-
24
Loaders.css
Delightful, performance-focused pure css loading animations
loaders.css is a collection of pure CSS loading animations designed to drop into any web project without JavaScript or image assets. Each loader is built from simple HTML elements animated with CSS keyframes, transforms, and opacity to create spinners, pulses, bars, and geometric patterns. Because they’re vector-based and CSS-driven, the animations scale cleanly at any resolution and look sharp on high-DPI displays. The library emphasizes small, reusable snippets: you copy a minimal markup block, apply the provided class, and tweak size or color through CSS variables or overrides. Animations are crafted to be smooth and performant, relying on GPU-friendly properties to keep frame rates high even on mobile devices. The set covers common loading metaphors (pulsing dots, rotating squares, bouncing bars), giving designers a consistent visual language across a site while keeping bundle size tiny. -
25
Lottie-Web
Render After Effects animations natively
Lottie-Web renders vector animations exported from Adobe After Effects as lightweight JSON, playing them in the browser via SVG or Canvas. Animations remain crisp at any resolution, load quickly compared to videos or GIFs, and can be controlled programmatically for interactivity. The runtime supports playback options like loop, autoplay, segment control, and event hooks, making it easy to sync motion with UI state. Because animations are data rather than pixels, designers and developers can collaborate: designers export with the Bodymovin plugin, and developers integrate the JSON with minimal code. The renderer handles masks, shapes, and keyframe timing to closely mirror After Effects behavior within web constraints. This approach brings high-quality motion design to product interfaces without large asset sizes or complex sprite workflows.
