Powerful document editing and collaboration in your app or environment. Ultimate security, API and 30+ ready connectors, SaaS or on-premises Learn more →
Top 23 JavaScript Animation Projects
-
Project mention: How do developers create stunning animations on text and elements like this? | reddit.com/r/howdidtheycodeit | 2023-05-24
To your original question though, there are lots of ways to achieve these types of animations and the best solution is dependent on your requirements and experience. I suggest looking into css animations and anime.js. If you're looking to do more complex animations, a tool like lottie might be a better fit.
-
I'm a big fan of curated lists and resources, and a great example of that is GitHub's awesome lists but I've noticed there seems to be a lack of any art focused that isn't specific to one software (such as Awesome Blender) or that are actively maintained, the closest being https://github.com/goabstract/Awesome-Design-Tools, which, although still quite helpful today, hasn't been updated in 3 or 4 years since Flawless Apps joined the Abstract team, so contains many broken links and there are plenty of new and useful options that aren't there. So I'm going to remake it over the next weekend and keep it regularly updated so any help with finding links to software, plugins, hardware, websites, learning materials and anything else you think might be relevant, any help would be greatly appreciated.
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
-
-
I used the Greensock (GSAP) library for the animation.
-
-
CodiumAI
TestGPT | Generating meaningful tests for busy devs. Get non-trivial tests (and trivial, too!) suggested right inside your IDE, so you can code smart, create more value, and stay confident when you push.
-
-
Project mention: Has anyone used Vanta.js for dynamic backgrounds? | reddit.com/r/react | 2022-08-13
-
Maybe this tool helps: https://github.com/mifi/editly
-
Project mention: 30 inspiring web developer portfolio examples you have never seen before | dev.to | 2023-02-20
Tip: Textillate.js is the text animations library you can use to animate your texts like Adam did.
-
-
Project mention: What is e.defaultPrevented and why library authors MUST use it | dev.to | 2023-01-06
@dogstudio/highway is one such library that doesn't check for that, and thus preventing the default behavior of an anchor will not prevent further navigation.
-
-
-
Project - https://github.com/chetanverma16/react-portfolio-template Release Notes - https://github.com/chetanverma16/react-portfolio-template/releases/tag/3.0
-
react-native-animated-charts
Set of components and helpers for building complex and beautifully animated charts
Project mention: Animations for a component inside NativeBase Actionsheet are not animating correctly | reddit.com/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.
-
-
-
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
Project mention: Scrawl-canvas 2D canvas library – proposed roadmap | news.ycombinator.com | 2023-05-28 -
-
ONLYOFFICE
ONLYOFFICE Docs — document collaboration in your environment. Powerful document editing and collaboration in your app or environment. Ultimate security, API and 30+ ready connectors, SaaS or on-premises
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-05-28.
JavaScript Animations related posts
- Scrawl-canvas 2D canvas library – proposed roadmap
- How do developers create stunning animations on text and elements like this?
- How to manage procrastination and lack of focus during learning?
- Animate your SVG text with animejs (and Vue)
- A slick animation from Better Call Saul
- Auto generating interactive playground from code
- Does anyone know how to do this? It looks pretty cool for a coffee shop website assignment and I want to understand how this is made with html/css/js Is anyone able to direct me to where I can learn to make this layout?
-
A note from our sponsor - ONLYOFFICE
www.onlyoffice.com | 31 May 2023
Index
What are some of the best open-source Animation projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | anime.js | 45,214 |
| 2 | Awesome-Design-Tools | 28,513 |
| 3 | particles.js | 27,179 |
| 4 | velocity | 17,211 |
| 5 | GreenSock-JS | 16,340 |
| 6 | jquery.transit | 7,338 |
| 7 | react-burger-menu | 4,903 |
| 8 | move.js | 4,713 |
| 9 | vanta | 4,527 |
| 10 | editly | 4,082 |
| 11 | textillate | 3,624 |
| 12 | Vizzu | 1,688 |
| 13 | highway | 1,419 |
| 14 | react-typist | 1,354 |
| 15 | typical | 1,185 |
| 16 | react-portfolio-template | 914 |
| 17 | react-native-animated-charts | 856 |
| 18 | Odoo | 806 |
| 19 | motus | 604 |
| 20 | animatelo | 475 |
| 21 | web-portfolio | 289 |
| 22 | Scrawl-canvas | 259 |
| 23 | AniX | 257 |
Access the most powerful time series database as a service
Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.
www.influxdata.com