Making a Realistic Folding Animation With Framer Motion

In this video we'll be recreating a design I came across on Twitter where Sam created this beautiful folding map component. We'll be using Framer Motion to recreate the same result with very little effort! Make sure to check the live playground linked below to get the code and play around with the map yourself! LINKS: Code and live playground: https://www.frontend.fyi/v/making-a-foldable-map-with-framer-motion Sam's Tweet: https://x.com/samdape/status/1799843696751325304 MORE? 📈 If you want more content like this, become a Frontend FYI PRO and get access to my current and all future courses for a one-time purchase: https://fe.fyi/pro 📺 If you want to see more videos like these, check out my website: https://fe.fyi/videos ✉️ Subscribe to my newsletter: https://fe.fyi/newsletter MY SOCIALS 🌍 My website – https://www.frontend.fyi 🐦 Twitter – https://www.twitter.com/JeroenReumkens 📸 Instagram – https://www.instagram.com/jeroenreumkens 💼 Linkedin – https://www.linkedin.com/in/jeroenreumkens COLLAB Want to work together on creating content? Feel free to reach out via jeroen [at] frontend.fyi WHO AM I? If you're new to this channel — Hey, my name is Jeroen. A frontend engineer with almost 15 years of professional experience, who in 2023 decided to stop teaching only his close collegeas to start teaching the whole world. What I teach some call Design Engineering, I like to call it the Craft of Frontend. TIMESTAMPS: 00:00 – Intro 00:30 – Starting point 01:30 – Add three column layout 02:13 – Add map image 03:30 – Overlap map sections 04:12 – Explaining the approach to add drag 05:04 – Add draggable div 07:30 – Limit how far you can drag 08:25 – Transform dragged distance into a css transform of the map 10:30 – Prevent drag trigger area from moving while dragging 11:18 – Scale center portion of the map when unfolding map 12:17 – Add shadow to center portion 13:53 – Skew map for realism 15:25 – Add crease lines to the map 15:56 – Add some shadows for even more realism 17:28 – Make map auto open when you stop dragging 18:34 – Adding bounce when map opens (using motion variants) 20:26 – Add some text that appears when map opens 21:22 – Outro #framermotion #webdevelopment #frontend