Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge. Learn more →
Top 23 JavaScript Animation Projects
-
Project mention: A Modern High-Performance Open Source Message Queuing System | news.ycombinator.com | 2023-07-27
-
https://algorithm-visualizer.org/ is decent, interactive, and has a GitHub repo.
-
Amplication
Amplication: open-source Node.js backend code generator. An open-source platform that helps developers build backends without spending time on boilerplate & repetitive coding. Including production-ready GraphQL & REST APIs, DB schema, DTOs, filtering, pagination, RBAC, & more.
-
-
Project mention: Want to create attractive, interactive docs? Use these amazing documentation tools and examples | dev.to | 2022-12-02
Rodrigo Pombo is the creator of Code Hike. He has been making tools to make code and technical data more comprehensible for some time. Previously, he applied a similar technique to make your git history easier to navigate and comprehend with git-history.
-
-
laxxx
Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
-
react-native-animatable
Standard set of easy to use animations and declarative transitions for React Native
tried this method and it throws and error ref.current.pause is not a function I also don't see anything on the GitHub page of the package...? https://github.com/oblador/react-native-animatable
-
Appwrite
Appwrite - The open-source backend cloud platform. The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!
-
Project mention: Trying to build a front end interactive browser or app experience where touch to screen simulates a visual heat map. | /r/webdev | 2022-11-25
Javascript touch events paired with WebGL would be the route I’d go. There are some really great libraries for WebGL (twojs) or working with SVG (mojs) if you want to keep it simple
-
-
Project mention: Best Animation packages for React.js , every frontend developer should use it | dev.to | 2023-07-17
Github repo : https://github.com/sghall/react-move
-
The confetti is based off canvas-confetti. I'm looking to add more effects. Its a small thing, but people really like it :)
-
-
Project mention: Seeking Guidance and Implementation Tips for Vanta.js-like Effects in Flutter | /r/flutterhelp | 2023-06-01
Looking 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.
-
Project mention: Setting up Locomotive Scroll and GSAP/ScrollTrigger with Nuxt 3? | /r/Nuxt | 2023-04-27
The documentation is written on the github: https://github.com/studio-freight/lenis
-
mixitup
A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more
Project mention: How to chain multiple filters together? And remove the filters individually on clicking them again | /r/Frontend | 2022-10-19 -
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
-
-
Project mention: Impressive performance gains in moving TypeIt from Gatsby to Astro | news.ycombinator.com | 2023-07-19
- the overall performance score jumped by 12 points.
All of this was achieved by sticking with the same overall design and layout. It was really due to getting away from a heavy, React-based static site generator.
If you’re working with a similar type of site and looking to upgrade, rebuild, or migrate, I highly recommend Astro and its Starlight theme. I’ll be using it probably exclusively moving forward.
See the TypeIt site here:
https://typeitjs.com
-
This is Motionity https://github.com/alyssaxuu/motionity
-
Project mention: Best Animation packages for React.js , every frontend developer should use it | dev.to | 2023-07-17
Github repo : https://github.com/rnosov/react-reveal
-
react-native-collapsible
Animated collapsible component for React Native, good for accordions, toggles etc
Project mention: what is the best way to make this component using expo? does anyone know of a library? | /r/reactnative | 2023-02-23Otherwise, if you really want to use an external lib, react-native-collapsible is another option but it isn’t much maintained either
-
-
I have no experience with this library but I wonder if you could use the formattingFn prop and format the number with a currency function, like in https://github.com/glennreyes/react-countup/issues/529
-
SurveyJS
A Non-Cloud Alternative to Google Forms that has it all.. SurveyJS JavaScript libraries allow you to easily set up a robust form management system fully integrated into your IT infrastructure where users can create and edit multiple dynamic JSON-based forms in a no-code form builder. Learn more now.
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).
The latest post mention was on 2023-07-27.
JavaScript Animation related posts
- Create a SwiftUI Video Streaming App With Fun Emoji Reactions
- Impressive performance gains in moving TypeIt from Gatsby to Astro
- Best Animation packages for React.js , every frontend developer should use it
- Shifty, the fastest TypeScript animation engine on the web, hits 3.0
- TypeScript animation library Shifty 3.0.0 released
- Shifty: The fastest JavaScript animation engine on the web
- anime: is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects
-
A note from our sponsor - InfluxDB
www.influxdata.com | 24 Sep 2023
Index
What are some of the best open-source Animation projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | anime.js | 47,063 |
| 2 | algorithm-visualizer | 44,297 |
| 3 | scrollreveal | 21,748 |
| 4 | git-history | 13,388 |
| 5 | svg.js | 10,518 |
| 6 | laxxx | 10,073 |
| 7 | react-native-animatable | 9,580 |
| 8 | two.js | 8,055 |
| 9 | progressbar.js | 7,702 |
| 10 | react-move | 6,557 |
| 11 | canvas-confetti | 5,778 |
| 12 | lightgallery.js | 5,272 |
| 13 | vanta | 4,844 |
| 14 | lenis | 4,786 |
| 15 | mixitup | 4,494 |
| 16 | react-flip-move | 3,974 |
| 17 | Blotter | 2,976 |
| 18 | typeit | 2,920 |
| 19 | motionity | 2,774 |
| 20 | react-reveal | 2,678 |
| 21 | react-native-collapsible | 2,382 |
| 22 | lazy-line-painter | 1,940 |
| 23 | react-countup | 1,797 |
Collect and Analyze Billions of Data Points in Real Time
Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge.
www.influxdata.com