TypeScript Animations

Open-source TypeScript projects categorized as Animations

Top 15 TypeScript Animation Projects

  • barba

    Create badass, fluid and smooth transitions between your website’s pages.

    Project mention: Smooth Page Transitions in 2023 | reddit.com/r/webdev | 2023-01-31

    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-25

    You’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).

  • animate-css-grid

    Painless transitions for CSS Grid

    Project mention: Creating smoother CSS transitions with Animate CSS Grid | dev.to | 2023-01-03

    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.

    Project mention: React Animation Library | reddit.com/r/reactjs | 2022-09-04

    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!

  • react-native-modalfy

    🥞 Modal citizen of React Native.

    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.

  • hamburger-react

    Animated hamburger menu icons for React (1.5 KB) 🍔

    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/)

  • React Native Tabbar Interaction

    Tabbar Component For React-Native

    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

  • react-spinners-css

    Amazing collection of React spinners components with pure css

  • Slidy

    📸 Sliding action script

    Project mention: Where to find a good carousel for Sveltekit? | reddit.com/r/sveltejs | 2022-12-29

    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-23

    Some 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)

  • scrollxp

    Alpine.js-esque library for scrolling animations on websites

  • 2048-in-react

    :joystick: a 2048 clone built with React and Typescript. Including Animations!

  • 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


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.