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.
-
-
-
laxxx
Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
-
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-animatable
Standard set of easy to use animations and declarative transitions for React Native
-
mixitup
A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more
-
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
-
react-native-collapsible
Animated collapsible component for React Native, good for accordions, toggles etc
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
Project mention: Mastering Web Animation with JavaScript Libraries: A Comprehensive Guide | dev.to | 2024-05-09Repository: anime.js on GitHub
ScrollReveal (22.1k ⭐) — A library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.
Project mention: Mastering Web Animation with JavaScript Libraries: A Comprehensive Guide | dev.to | 2024-05-09Repository: GSAP on GitHub
It's only meaningful to consider that our world is a simulation if it is an imperfect one, otherwise you're just using "simulation" as an awkward synonym for "reality".
Click the "snow" button enough (https://catdad.github.io/canvas-confetti/) and you'll get a horizontal line separating the pre-slowdown flakes from the post-slowdown flakes. I suppose that's the kind of simulation imperfection that we might look for.
Personally, I don't think we're hacking our way out of this one any time soon, so I'm happy to just call it reality.
Project mention: Show HN: A JavaScript library for data visualization in both SVG and Canvas | news.ycombinator.com | 2024-04-11> DOM-like event bubbling
This does sound very interesting. I started playing with https://two.js.org/ for a browser game but the event system proved a challange. The typescript focus also looks promising. Will give it a try.
Project mention: Best Animation packages for React.js , every frontend developer should use it | dev.to | 2023-07-17Github repo : https://github.com/sghall/react-move
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.
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
Project mention: Best Animation packages for React.js , every frontend developer should use it | dev.to | 2023-07-17Github repo : https://github.com/rnosov/react-reveal
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 Animation related posts
-
Mastering Web Animation with JavaScript Libraries: A Comprehensive Guide
-
Top 10 JavaScript Animation Libraries
-
Time-Based CSS Animations
-
React Refs Ritual: Managing Focus, Selections, and More.
-
Creating Scroll Animations Using ScrollReveal
-
Where the hell do I create these nice animations
-
An Afternoon with SVGs | Frontend Challenge Entry
-
A note from our sponsor - SaaSHub
www.saashub.com | 15 May 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,768 |
| 2 | algorithm-visualizer | 46,266 |
| 3 | scrollreveal | 22,126 |
| 4 | GreenSock-JS | 18,721 |
| 5 | git-history | 13,471 |
| 6 | svg.js | 10,875 |
| 7 | laxxx | 10,275 |
| 8 | react-native-animatable | 9,731 |
| 9 | canvas-confetti | 8,766 |
| 10 | two.js | 8,193 |
| 11 | progressbar.js | 7,754 |
| 12 | react-move | 6,574 |
| 13 | lightgallery.js | 5,290 |
| 14 | vanta | 5,282 |
| 15 | mixitup | 4,508 |
| 16 | react-flip-move | 4,029 |
| 17 | Blotter | 3,030 |
| 18 | typeit | 3,018 |
| 19 | motionity | 2,964 |
| 20 | react-reveal | 2,721 |
| 21 | react-native-collapsible | 2,414 |
| 22 | lazy-line-painter | 1,955 |
| 23 | react-countup | 1,923 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com