Sankey Diagram

Figma’s Auto Layout has always been my source of inspiration for adaptive animation. This week, I’ve been developing an adaptive prototype for Sankey diagram tracking patient movement through healthcare facilities.

The main idea here is to make the diagram adjust to a layout that changes its dimensions dynamically, so I only need to keyframe the window size property while keeping all content in its place.

✨ Setup:

• A main application window with all elements dinamically positioned. Adjusting it’s size controls the header, footer and side bar elements.

• Nulls controlling the start and end points of all flows. The stroke width of each flow adapts to its value. The more pacients in a group, the wider the flow.

• All flows are drawn using JavaScript which helps control inTangents and outTangents values and ensure smooth curves.

• Additional JS expressions to adjust texts and other small elements dynamically.

🔗 My Portfolio: https://www.behance.net/victoriashelest