InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises. Learn more →
Top 15 TypeScript Animation Projects
-
i think these statistics are not a good guide - it says that barba was last updated 6 years ago, while the last update was actually 17h ago
-
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.
Project mention: Introducing ArrowJS • Reactivity without the framework | reddit.com/r/javascript | 2022-11-17📣 Howdy, I’m Justin Schroeder (author of FormKit and AutoAnimate) — I just released a new experimental JavaScript library for rendering interfaces declaratively. A few of the talking points:
-
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!
-
tsParticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
Project mention: Create Beautiful Animations by Integrating Particles.js With React | dev.to | 2023-01-25You’re almost done! You just have to configure your particles/objects in order of animation, interaction, direction, opacity, etc. For this illustration, you’ll be using an already preset configuration from the tsparticles repository, but you can always tweak it to your own style or create one from scratch if you’d like.
-
react-cool-inview
😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
-
As of this writing, nearly all of the CSS grid properties are included in the Animatable CSS Properties. However, for this article, we will not animate the grid properties by writing CSS animation for our transitions. Instead, we’ll use the Animate CSS Grid open source package.
-
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Hi! A new major version of React Awesome Reveal, an animation library for React apps for easily adding revealing effects, is now out 🚀 Give it a try!
-
Project mention: Which library do you use for creating modals? | reddit.com/r/reactnative | 2022-09-22
I really like React Native Modalfy. https://github.com/colorfy-software/react-native-modalfy
-
InfluxDB
Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.
-
Project mention: Setting up a responsive B2B project with Grommet, PropelAuth, and Next.js | dev.to | 2022-05-25
To let our users open/close the sidebar, we first need something they can click on. Let’s add a hamburger icon in our AppBar, with the help of [hamburger-react](https://hamburger-react.netlify.app/)
-
Project mention: How would I create this navbar animation in RN? | reddit.com/r/reactnative | 2023-01-16
Not quite what you’re looking for but you might get some ideas on ui: https://github.com/Mindinventory/react-native-tabbar-interaction
-
-
-
This one is great https://github.com/Valexr/Slidy
-
react-native-fiesta
🎉 A set of celebration animations powered by @shopify/react-native-skia. Engage more with your users by celebrating in your React Native application.
Project mention: Go to react native celebration animation library? | reddit.com/r/reactnative | 2023-01-23Some of the good ones I've found: https://github.com/mateoguzmana/react-native-fiesta (Uses Skia which is great, but animations themselves are a tad basic. But it's a super new project)
-
-
-
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-01-31.
TypeScript Animations related posts
- Smooth Page Transitions in 2023
- Create Beautiful Animations by Integrating Particles.js With React
- Go to react native celebration animation library?
- How would I create this navbar animation in RN?
- Creating smoother CSS transitions with Animate CSS Grid
- Happy new year RN devs!
- React Native Skia UI Thread Rendering
-
A note from our sponsor - InfluxDB
www.influxdata.com | 4 Feb 2023
Index
What are some of the best open-source Animation projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | barba | 10,305 |
| 2 | auto-animate | 6,774 |
| 3 | tsParticles | 4,794 |
| 4 | react-cool-inview | 1,401 |
| 5 | animate-css-grid | 1,262 |
| 6 | react-awesome-reveal | 777 |
| 7 | react-native-modalfy | 730 |
| 8 | hamburger-react | 726 |
| 9 | React Native Tabbar Interaction | 672 |
| 10 | react-native-gallery-toolkit | 642 |
| 11 | react-spinners-css | 307 |
| 12 | Slidy | 245 |
| 13 | react-native-fiesta | 187 |
| 14 | scrollxp | 64 |
| 15 | 2048-in-react | 61 |
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.
www.sonarsource.com