How to create a smooth draggable list with react in 10 mins

Welcome to another tutorial!! Today, we are going to create a draggable list that you can use in your react applications with ease, using framer-motion. If you go to their examples page on codesandbox , you will see this implemented. In case you wan...

codexcode.hashnode.dev6 min read

#reactjs #javascript #animations

Responses3

Markdown supported · ⌘↵ to post

MS

Markus Strubegger

Aug 10, 2021

Hey Augustus, this is gold! I just ran into a problem, the actual framer-motion comes in version "^4.1.17". In that version if I have a longer list where i need to scroll, the draged item jumps down by the scrollY value and I can't find anything to compensate that. (In your sandbox I added 3 bigger items to the list and edited the framer-motion version) Do you have any idea for me for that problem? best Markus PS: excuse my english please :)

SM

Savio Martin

Focused on Frontend, love backend too

Jun 27, 2021

This looks so cool mate 👏 Thanks for the tutorial, hoping to see more great content from you! 🙌

AO

Augustus Otu

Software engineer

Jun 27, 2021

Thank you for reading. More to come soon

YC

Yogesh Chavan