Modal Transition

Untitled 2

Getting back into some personal iOS projects to kick off the new year! Mocked up this modal transition in the morning and just got done building it in code. Feels good to be working on a personal dev project again :)

I'm a big fan of the ripple effect in Android Material design because there is such a direct almost tactile response to a touch. So I'm trying to think of ways to utilize the effect while still keeping an iOS native feel.

This is a screen recording of the transition from the phone. The photo is a pretty pic from Instagram with a custom radial gradient CALayer on top so the gradient can change and scale dynamically. The modal view is a UIVisualEffectView so it blurs the background behind it and is masked with an animated CAShapeLayer circle path to show and hide the modal view.

Used this great gif tutorial from InVision to help optimize this gif, really great tricks in this article!

keyboard shortcuts: L or F like Z toggle zoom post comment