SaaSHub helps you find the best software and product alternatives Learn more →
Top 23 JavaScript Animation 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.
-
-
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.
-
-
-
-
react-native-animated-charts
Set of components and helpers for building complex and beautifully animated charts
-
animatelo
Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.
-
-
Scrawl-canvas
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
Project mention: Tools and Libraries that make my my life easier as a solo developer 🔥 | dev.to | 2024-05-26Unique animation library | Anime.js https://animejs.com/
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
Unlike Next.js, I don't assume you know GSAP. So, GSAP which stands for GreenSock Animation Platform is another javascript framework (yes, there are millions of javascript frameworks) that is used to animate elements on websites. Open their website (gsap.com) to explore the type of animations you can make using GSAP.
Project mention: Mastering Web Animation with JavaScript Libraries: A Comprehensive Guide | dev.to | 2024-05-09Repository: Velocity.js on GitHub
Project mention: Seeking Guidance and Implementation Tips for Vanta.js-like Effects in Flutter | /r/flutterhelp | 2023-06-01Looking that the source code, it seems that these are implemented using shaders. Those are a new thing in Flutter, so I'd try to go that road. You probably need a CustomPaint with a CustomPainter, painting a Rect with a Paint using that Shader, feeding it all input parameters. I've absolutely no experience with shaders in Flutter, but that's what I'd try for something simple like the fog. For the birds, you'd probably need to implement a lot of 3D geometry yourself.
This library seems to have the most downloads on NPM Trends: https://github.com/negomi/react-burger-menu
I found https://github.com/mifi/editly to be an intuitive frontend for this type of task - I used it to create a montage of several clips and was able to easily adjust parameters around timestamps and such to get the montage perfect
It's using Highway.js or Barba.js I am not using any framework on this project.
Your project portfolio I actually thought was a troll at first, the colors, alignments, fonts, are all just horrendous. No offense, you're not a designer. But just use a nice clean template, there are hundreds out there. Use a UI kit, something. It has to be readable at the very least. Here, free - https://github.com/chetanverma16/react-portfolio-template
I don't like Typescript because it forces me to think about types and data structures and stuff. Which is a Good Thing because I absolutely have to think about that stuff when working on large codebases with a team of colleagues: without the inline documentation and text editor help TS gives me when working on those codebases I'd be (at least!) 10x slower when refactoring old code or adding new code. And nobody wants to pay a slow developer!
However ... the one place I refuse to use Typescript is in my side project - a JS canvas library. I can justify this because: 1. it's a big codebase, but I know every line of it intimately having spent the last 10 years (re-)writing it; 2. nobody else contributes (and I kinda like it that way); and 3. I keep a close eye on competing canvas libraries and I've watched several of them go through the immense (frustrating!) work of converting their codebases to TS over the past few years and, seriously, I don't need that pain in my not-paid-for life.
Even so, I do maintain a .d.ts file for the library's 'API' (the functions devs would use when building a canvas using my library) because the testing, documentation and autocompletion help it offers is too useful to ignore. It is additional work, but it's just one file[1] and I can live with that.
[1] https://github.com/KaliedaRik/Scrawl-canvas/blob/v8/source/s...
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).
JavaScript Animations related posts
-
SVG path animation in Nextjs using GSAP
-
How 'npm create vue@latest' works
-
Tools and Libraries that make my my life easier as a solo developer 🔥
-
Mastering Web Animation with JavaScript Libraries: A Comprehensive Guide
-
Top 10 JavaScript Animation Libraries
-
Time-Based CSS Animations
-
Figma's Journey to TypeScript
-
A note from our sponsor - SaaSHub
www.saashub.com | 1 Jun 2024
Index
What are some of the best open-source Animation projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | anime.js | 48,914 |
| 2 | Awesome-Design-Tools | 32,086 |
| 3 | particles.js | 28,501 |
| 4 | GreenSock-JS | 18,883 |
| 5 | velocity | 17,272 |
| 6 | jquery.transit | 7,302 |
| 7 | vanta | 5,299 |
| 8 | react-burger-menu | 5,011 |
| 9 | move.js | 4,714 |
| 10 | editly | 4,593 |
| 11 | textillate | 3,652 |
| 12 | Vizzu | 1,881 |
| 13 | typical | 1,544 |
| 14 | highway | 1,424 |
| 15 | react-typist | 1,379 |
| 16 | react-portfolio-template | 1,261 |
| 17 | react-native-animated-charts | 902 |
| 18 | Odoo | 814 |
| 19 | motus | 633 |
| 20 | animatelo | 487 |
| 21 | web-portfolio | 336 |
| 22 | react | 330 |
| 23 | Scrawl-canvas | 314 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com