The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning. Learn more →
Top 23 Animation Open-Source Projects
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
Lottie for Android, iOS, and React Native
Render After Effects animations natively on Android and iOS, Web, and React Native
-
-
-
manim
A community-maintained Python framework for creating mathematical animations. (by ManimCommunity)
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
-
-
-
auto-animate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
-
-
UltimateAndroidReference
:rocket: Ultimate Android Reference - Your Road to Become a Better Android Developer
-
tsParticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
Project mention: Add basic animations to your site using Animate.css and wow.js | dev.to | 2024-04-16Animate.css
Anime.js is celebrated for its simplicity, speed, and versatility. This compact library simplifies the animation process, enabling developers to craft visually striking animations with minimal effort. Anime.js supports a wide array of effects like scaling, morphing, and rotating, offering developers the tools to create complex timelines and animations with ease.
Worth mentioning that After Effects can export CSS/SVG/canvas animations with the free bodymovin/Lottie plugin. This is my personal go to for creating web key frame animations and elements.
Not every after effects feature is exportable, but it’s the best and most reliable solution I’ve found for this type of workflow, maybe due in part though to my previous experience with AE.
Currently supported features: http://airbnb.io/lottie/#/supported-features
Project mention: How to create this floating particles 3D background effect? | /r/webdev | 2023-07-02Not the same effect, but with particles.js you can get some nice stuff
Project mention: Created this app using Swift and a bit of Objective-C | /r/iOSProgramming | 2023-04-30I started out with the Hero library (https://github.com/HeroTransitions/Hero) but soon replaced it with custom made animation. However, you may want to look into this library as is has a lot of nice transitions ready to use for most cases.
I've been looking for a small project to do that would let me play with Greensock (GSAP), specifically a bit with some SVG files I generated with Corel Vector. When I saw the frontend challenge and had an afternoon at work with downtime between a few projects, I knew it'd be a great opportunity to explore a bit!
Mo.js is a potent and adaptable JavaScript animation library with a straightforward API and browser support. It's distinguished by its high-performance animations and density-independent effects, ensuring outstanding visual quality on any device. Mo.js provides extensive tools for animation creation, including Player for animation control, Curve Editor, and Timeline Editor for custom easing and editing.
Project mention: React Native Tutorial: How to Implement a Celebration Confetti Burst | dev.to | 2023-09-19Further research led me to LottieFiles (not sponsored) — a haven for animation enthusiasts offering a myriad of free animations, including a variety of confetti animations ready to be used. To integrate these animations in a React Native app, the lottie-react-native library comes in handy.
Project mention: Would anyone be interested in having me create custom Tailwind CSS Components for them? | /r/nextjs | 2023-12-05https://auto-animate.formkit.com/ some basic inspiration - consider also that this is free and just takes donations.. That model brings people to you and then you can do bespoke projects and charge too
Create badass, fluid and smooth transitions between your website's pages (https://barba.js.org) by Thierry Michel, Xavier Foucrier, Luigi De Rosa This one is really good - just the minimum API to make these transitions so good.
You can download TaskbarX here (For windows tray)
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
Animations related posts
- A Rigorous Derivation of the Bubble Sort Curve
- Add basic animations to your site using Animate.css and wow.js
- 🤯 Keep Up With these 50 Articles
- Barba.js – Create fluid and smooth transitions between your website's pages
- An Afternoon with SVGs | Frontend Challenge Entry
- Incredible JavaScript Animation Libraries
- Show HN: Dropflow, a CSS layout engine for node or <canvas>
-
A note from our sponsor - WorkOS
workos.com | 25 Apr 2024
Index
What are some of the best open-source Animation projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | animate.css | 79,744 |
| 2 | anime.js | 48,686 |
| 3 | Lottie for Android, iOS, and React Native | 34,646 |
| 4 | Awesome-Design-Tools | 31,784 |
| 5 | particles.js | 28,357 |
| 6 | Hero | 21,815 |
| 7 | manim | 18,854 |
| 8 | GreenSock-JS | 18,632 |
| 9 | Mo.js | 18,254 |
| 10 | velocity | 17,272 |
| 11 | lottie-react-native | 16,492 |
| 12 | Material-Animations | 13,541 |
| 13 | AndroidViewAnimations | 12,375 |
| 14 | auto-animate | 11,584 |
| 15 | barba | 11,420 |
| 16 | UltimateAndroidReference | 7,811 |
| 17 | TaskbarX | 7,624 |
| 18 | Dynamic.js | 7,563 |
| 19 | jquery.transit | 7,302 |
| 20 | ViewAnimator | 7,193 |
| 21 | tsParticles | 6,999 |
| 22 | bounce.js | 6,220 |
| 23 | AndroidImageSlider | 5,641 |
Sponsored
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com