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! Learn more →
Top 23 TypeScript Animation Projects
-
this is perfect then. a large part of the threejs userbase is using https://github.com/pmndrs/react-three-fiber (roughly 1/4, and growing) and this is also where you find lots of job opportunities. fiber has a vast eco system, but if you can pair this with your knowledge of shaders you'll find a job tomorrow if you wanted.
-
-
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!
-
It's using Highway.js or Barba.js I am not using any framework on this project.
-
Project mention: Anime.js – A lightweight JavaScript animation library | news.ycombinator.com | 2023-06-22
-
Konva
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Based on this, I found that some of the libraries are dead and no longer have any support. Only two libraries are still alive and have significant amount of stars on GitHub and downloads on NPM. They are Fabric.js and Konva.js.
-
auto-animate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
You could also have a look at https://auto-animate.formkit.com, it's perfect for what you want to do
-
-
Onboard AI
Learn any GitHub repo in 59 seconds. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.
-
Project mention: Expo – open-source platform for making universal apps for Android, iOS, and web | news.ycombinator.com | 2023-07-25
FYI react-native-reanimated (https://github.com/software-mansion/react-native-reanimated) is not the Animated API from React Native. react-native-reanimated allows JS code to run on a UI thread that is able to synchronously modify layout, providing alternative synchronous ways for you to hook into the layouting. For instance, as opposed to the asynchronous `measure()` method provided by React Native to measure layouts, react-native-reanimated allows one to call their version of `measure()` (https://docs.swmansion.com/react-native-reanimated/docs/api/...) to perform the same operation on the UI thread, synchronously.
-
Project mention: Top 10+ Best React Native UI Components for Mobile App Development | dev.to | 2023-01-04
GitHub Stars: 5k
-
Project mention: Show HN: We built swup+fragment-plugin to visually enhance classic websites | news.ycombinator.com | 2023-08-02
2. The newly released fragment-plugin [3] that provides a declarative API for dynamically replacing containers based on rules
I can now finally build websites that tick all three boxes:
1. Visually impressive, fun, and snappy by using swup's first-class support for animations[4], cache[5], and preload capacities[6], enhanced with fragment visits as seen on the demo site.
2. Accessible by being able to serve server-rendered semantic markup that will fully work even with JavaScript disabled (try it out on the demo site!). On top of that, swup's a11y plugin[7] will automatically announce page visits to assistive technologies and will focus the new `` element after each visit.
3. Because now all I need for my fancy frontend is a bit of progressive JavaScript, I can choose whatever tool I like on the server, keeping complexity low and maintainability high. I can use SSGs like eleventy or Astro (the demo site is built using Astro!), I can use any CMS like WordPress or ProcessWire, or a framework like Laravel. And I don't have to maintain an additional node server for SSG!
And all it took was 20 years! ;)
-
-
-
Check out React Native Graph, it uses Skia and handles 120fps animations: https://github.com/margelo/react-native-graph
-
Project mention: Shifty, the fastest TypeScript animation engine on the web, hits 3.0 | /r/typescript | 2023-07-03
-
Project mention: Best Animation packages for React.js , every frontend developer should use it | dev.to | 2023-07-17
Github repo : https://github.com/plus1tv/react-anime
-
watching-you
watching-you is a javascript library for building animations that watch anything on DOM 👀.
Project mention: JS animation library that lets your DOM focus on anything (just like eyes!) | /r/opensource | 2022-11-16 -
-
trigger
A library for creating scroll-based animation with HTML attributes and CSS variables. (by triggerjs)
-
-
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
-
react-useanimations
React-useanimations is a collection of free animated open source icons for React.js.
The resulting output will resemble the following: The issue above arises when the icon is rendered twice, but only one is animated. One approach to resolving this is to disable , as outlined in the documentation. React's renders each component twice in order to detect and report any potential issues within your application. However, it's generally not recommended to disable , as it may result in undetected bugs and errors.
-
There you go: https://github.com/seniv/react-native-notifier
-
react-native-keyboard-controller
Keyboard manager which works in identical way on both iOS and Android
-
Sonar
Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
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-09-03.
TypeScript Animation related posts
- Show HN: We built swup+fragment-plugin to visually enhance classic websites
- I’m starting to get into generative media and visual making and I want to know what software to use other than touchdesigner.
- Animated transitions between sections
- Help me out ya’ll. Spline 3D vs Dora 3D?
- Add expand & collapse transition
- Need help for job
- Best way to build charts in React Native?
-
A note from our sponsor - Appwrite
appwrite.io | 4 Oct 2023
Index
What are some of the best open-source Animation projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | react-three-fiber | 23,935 |
| 2 | G2 | 11,748 |
| 3 | barba | 11,045 |
| 4 | theatre | 9,869 |
| 5 | Konva | 9,840 |
| 6 | auto-animate | 9,566 |
| 7 | tween.js | 9,422 |
| 8 | react-native-reanimated | 7,714 |
| 9 | react-native-modal | 5,252 |
| 10 | swup | 4,151 |
| 11 | scenejs | 2,533 |
| 12 | react-simple-animate | 1,788 |
| 13 | react-native-graph | 1,562 |
| 14 | shifty | 1,508 |
| 15 | react-anime | 1,506 |
| 16 | watching-you | 1,463 |
| 17 | vue-animate.css | 1,351 |
| 18 | trigger | 1,225 |
| 19 | scroll-out | 1,208 |
| 20 | react-awesome-reveal | 964 |
| 21 | react-useanimations | 961 |
| 22 | react-native-notifier | 938 |
| 23 | react-native-keyboard-controller | 936 |
Free Global Payroll designed for tech teams
Building a great tech team takes more than a paycheck. Zero payroll costs, get AI-driven insights to retain best talent, and delight them with amazing local benefits. 100% free and compliant.
try.revelo.com