Edit Mode Transition

I was given the task to prototype a transition for going into and out of the “Edit” mode for an ui that allows to edit and print a canvas print. It was important to not only communicate the shape of the actual canvas but also which parts of the photo are going to get printed on the sides—wrapped around the canvas print.

My solution was to create an animation of a canvas “unwrapping” and “wrapping” providing a seamless transition between two modes.

Made with FrameJS.