High Performance 3D Animation with React + rxjs

This page summarizes the projects mentioned and recommended in the original post on dev.to

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • react-three-fiber

    🇨🇭 A React renderer for Three.js

  • In fact React has even let us port this idea to the third dimension with react-three-fiber; a wonderful library that uses three.js as a custom React render target.

  • three.js

    JavaScript 3D Library.

  • In fact React has even let us port this idea to the third dimension with react-three-fiber; a wonderful library that uses three.js as a custom React render target.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • framer/motion

    Open source, production-ready animation and gesture library for React

  • In turn, it's common for us developers to lean on existing libraries to get the job done. framer-motion, react-spring and GSAP are great libraries, but we can learn a lot more about animation by implementing our own approach. What's more almost all animation libraries require us to work with someone else's conceptual model of user input. They provide extension APIs of course but we tend to implement each of these as closed-box concepts, you can consume them but not compose them freely.

  • RxJS

    A reactive programming library for JavaScript

  • What values? How much time? Those are up to the specific instance. Libraries like rxjs provide an algebra for working with streams, letting us mix them together, pluck out select elements and aggregate data over time. Others have explained streams far better than I can.

  • use-animation

    react hook for reactive animations, powered by rxjs

  • If you want to go deeper again then check out the project README and samsarajs. I'd like to try @most/core instead of rxjs here since it boasts impressive performance[ref]. To me, this seems like a promising area for further investigation. I've begun to experiment with a similar approach in Unity3d, hopefully more to report soon!

  • Stripe

    PHP library for the Stripe API.

  • You know when you load a website and it has a bunch of fancy visualisations that respond to mouse and scroll position with animation? For most of the web's history creating experiences like these has either been impossible or required masochistic determination.

  • core

    Most.js core event stream (by mostjs)

  • If you want to go deeper again then check out the project README and samsarajs. I'd like to try @most/core instead of rxjs here since it boasts impressive performance[ref]. To me, this seems like a promising area for further investigation. I've begun to experiment with a similar approach in Unity3d, hopefully more to report soon!

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • Most.js

    Ultra-high performance reactive programming

  • [ref]

  • react-spring

    ✌️ A spring physics based React animation library

  • In turn, it's common for us developers to lean on existing libraries to get the job done. framer-motion, react-spring and GSAP are great libraries, but we can learn a lot more about animation by implementing our own approach. What's more almost all animation libraries require us to work with someone else's conceptual model of user input. They provide extension APIs of course but we tend to implement each of these as closed-box concepts, you can consume them but not compose them freely.

  • Rx.NET

    The Reactive Extensions for .NET

  • In ReactiveX terminology, this is a Subject wrapped up for easy consumption from React.

  • easings.net

    Easing Functions Cheat Sheet

  • An interpolator acts as a translation layer between different numerical ranges. They typically take the form of functions accepting take a value, t, from 0...1 and output a value of t from 0...1. This might sound familiar if you've heard of easing functions, which are almost ubiquitous in programmatic animation:

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Best Animation packages for React.js , every frontend developer should use it

    10 projects | dev.to | 17 Jul 2023
  • Top 7 React Animation Libraries in 2022

    10 projects | dev.to | 11 Aug 2022
  • Why is my React Component re-rendering?

    3 projects | dev.to | 10 May 2024
  • What is an observable?

    1 project | dev.to | 7 May 2024
  • Introducing the Enhanced @nipe-solutions/react-spring-bottom-sheet: Now Supporting React 18 and XState v5

    3 projects | dev.to | 22 Apr 2024