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. 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
-
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.
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.
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: Where the hell do I create these nice animations | news.ycombinator.com | 2024-04-25
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
Project mention: FFmpeg Lands CLI Multi-Threading as Its "Most Complex Refactoring" in Decades | news.ycombinator.com | 2023-12-12Sounds like you already have a process for most of this, but I found https://github.com/mifi/editly to be incredibly helpful to run ffmpeg and make my little time lapse video. Could be useful for others
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
Project mention: Animations for a component inside NativeBase Actionsheet are not animating correctly | /r/reactnative | 2023-04-26As you can see in this image, when you change datasets for this line chart, it animates the line graph as it changes it. You can clearly see its a nice and fluid movement. This is exactly how it works for me on a normal blank screen.
Project mention: Show HN: Dropflow, a CSS layout engine for node or <canvas> | news.ycombinator.com | 2024-03-21> working with glyphs and iterating them in reverse for RTL is brain-breaking. And line wrapping gets really complicated. It's also the most obscure because nobody has written down everything you need to know in one place
I can confirm this. I've been working on a (much simpler!) text layout engine for my canvas library over the past couple of months and the amount of complexity associated with just stamping some glyphs onto a canvas has left me screaming at my laptop on an almost daily basis. Getting a decent underline was a proud moment!
Question: did you ever find out what algorithm the various browsers are using to calculate how many words can fit on a given line? I'm almost there, except words will occasionally jump between lines when I scale the text. Really annoying!
The PR's still a work in progress, but I've got all the functionality I want in there (shaping lines to fit in non-rectangular containers, styling text, text along a non-straight line, dynamic updates, etc). Just need to test and document it all now ... https://github.com/KaliedaRik/Scrawl-canvas/pull/75
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
- Where the hell do I create these nice animations
- An Afternoon with SVGs | Frontend Challenge Entry
- Incredible JavaScript Animation Libraries
- Free Resources Every Web Developer Should Know About
- Ask HN: What are you working on this year?
- How to Add Animations to your React App Using GSAP
- Pixelating Live with SVG
-
A note from our sponsor - SurveyJS
surveyjs.io | 26 Apr 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,686 |
| 2 | Awesome-Design-Tools | 31,784 |
| 3 | particles.js | 28,380 |
| 4 | GreenSock-JS | 18,632 |
| 5 | velocity | 17,272 |
| 6 | jquery.transit | 7,302 |
| 7 | vanta | 5,249 |
| 8 | react-burger-menu | 5,002 |
| 9 | move.js | 4,714 |
| 10 | editly | 4,550 |
| 11 | textillate | 3,647 |
| 12 | Vizzu | 1,865 |
| 13 | typical | 1,535 |
| 14 | highway | 1,424 |
| 15 | react-typist | 1,379 |
| 16 | react-portfolio-template | 1,236 |
| 17 | react-native-animated-charts | 902 |
| 18 | Odoo | 814 |
| 19 | motus | 633 |
| 20 | animatelo | 485 |
| 21 | web-portfolio | 336 |
| 22 | react | 312 |
| 23 | Scrawl-canvas | 307 |
Sponsored
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.
workos.com