How to control the elements with react.js like this video ?

• dnd-kit

  43 11,358 4.9 TypeScript

  The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

https://dndkit.com/ this is an alternative to react-beautiful-dnd

• react-beautiful-dnd

  71 32,416 0.6 JavaScript

  Beautiful and accessible drag and drop for lists with React

  

Here you go. Have fun :-)

• SurveyJS

  surveyjs.io sponsored

  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.

  

• framer/motion

  43 22,054 9.8 TypeScript

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

  

I spent a couple of hours putting a demo together. It turned out to be not quite as easy as I hoped as apparently framer does not yet support "onDragOver" events (https://github.com/framer/motion/issues/538 ).

• animxyz

  22 2,374 0.0 SCSS

  The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.

  

For in/out animations like this (these are overkill) it’s quite easy to implement in React/Vue with a CSS tool my brother and I built: AnimXYZ.com and the performance is generally quite good thanks to hardware acceleration and not relying on JS request animation frame complexity.

Suggest a related project