Add drag and drop with Framer Motion in 5 minutes

In this video, we will add drag and drop controls to a list of items using Framer Motion.
💾 Starter code: https://github.com/Built-With-Code/drag-and-drop-framer-motion/tree/starter

⏭️ Watch This Next: https://www.youtube.com/watch?v=TeeWsBZg8og&list=PLdFJxFw1qVTiG_KgnX02p-taYdpKg9lOP

📱 Follow online: https://twitter.com/built_with_code

Have a question about anything in this video? Drop it in the comments!

⏰ Timecodes ⏰
0:00 - Intro + Preview
0:07 - Starter code
0:25 - Basic drag and drop
1:44 - Limiting drag control
3:26 - Setting drag constraints
5:29 - Outro

-------------------------------
Welcome to Built With Code, a channel focused on intermediate/advanced frontend web development topics. Some of my favorite tools are Next.js, TailwindCSS, and Framer Motion. If you find value from the videos, a like and/or subscribe is much appreciated!

Тэги:

#Built_With_Code #Coding #javascript #nextjs #next_js_tutorial #html #css #next.js #TailwindCSS #tailwind_css_react #tailwind_css #tailwind #tailwind_tutorial #typescript #website_coding #framer_motion_tutorial #framer_motion_drag_and_drop #drag_and_drop_list #nextjs_drag_and_drop #react_drag_and_drop #framer_motion_drag_constraints #framer_motion_drag_control #shadcn_checkbox #framer_motion_drag_elastic

Скачать видео