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-f...
Sam's Tweet: https://x.com/samdape/status/17998436...

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 –   / jeroenreumkens  
📸 Instagram –   / jeroenreumkens  
💼 Linkedin –   / 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