TypeScript Animation

Open-source TypeScript projects categorized as Animation

Top 23 TypeScript Animation Projects

  • react-three-fiber

    🇨🇭 A React renderer for Three.js

    Project mention: 3JS Job Market | /r/threejs | 2023-06-05

    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.

  • G2

    📊 A concise and progressive visualization grammar.

  • 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!

  • barba

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

    Project mention: Seamless Transition Using Highway.js/Barba.js | /r/learnjavascript | 2023-06-30

    It's using Highway.js or Barba.js I am not using any framework on this project.

  • theatre

    Motion design editor for the web

    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.

    Project mention: How I choose Fabric.js again | dev.to | 2023-09-03

    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.

    Project mention: Add expand & collapse transition | /r/tailwindcss | 2023-06-14

    You could also have a look at https://auto-animate.formkit.com, it's perfect for what you want to do

  • tween.js

    JavaScript/TypeScript animation engine

  • 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.

  • react-native-reanimated

    React Native's Animated library reimplemented

    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.

  • react-native-modal

    An enhanced, animated, customizable Modal for React Native.

    Project mention: Top 10+ Best React Native UI Components for Mobile App Development | dev.to | 2023-01-04

    GitHub Stars: 5k

  • swup

    Versatile and extensible page transition library for server-rendered websites :tada:

    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! ;)

    [0] https://github.com/swup/swup

  • scenejs

    🎬 Scene.js is JavaScript & CSS timeline-based animation library

  • react-simple-animate

    🎯 React UI animation made easy

  • react-native-graph

    📈 Beautiful, high-performance Graphs and Charts for React Native built with Skia

    Project mention: Best way to build charts in React Native? | /r/reactnative | 2023-06-07

    Check out React Native Graph, it uses Skia and handles 120fps animations: https://github.com/margelo/react-native-graph

  • shifty

    The fastest TypeScript animation engine on the web

    Project mention: Shifty, the fastest TypeScript animation engine on the web, hits 3.0 | /r/typescript | 2023-07-03
  • react-anime

    ✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

    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
  • vue-animate.css

    A port of Animate.css for use with transitions in Vue.js 2.0 / 3.0 and Alpine.js.

  • trigger

    A library for creating scroll-based animation with HTML attributes and CSS variables. (by triggerjs)

  • scroll-out

    ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects!

  • react-awesome-reveal

    React components to add reveal animations using the Intersection Observer API and CSS Animations.

    Project mention: Top 7 Next.js Animation Libraries in 2023 | dev.to | 2023-08-09
  • react-useanimations

    React-useanimations is a collection of free animated open source icons for React.js.

    Project mention: Best Feather-inspired animated icon libraries for React | dev.to | 2023-08-16

    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.

  • react-native-notifier

    Fast and simple in-app notifications for React Native

    Project mention: Toast Library recommendation | /r/reactnative | 2023-06-29

    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

    Project mention: Keyboard avoiding view | /r/reactnative | 2023-04-24
  • 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


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.