Matched Geometry Effect

Sharing about Matched Geometry Effect and how to achieve smooth transitions

In this article, I will share what the Matched Geometry Effect in SwiftUI is and how it helps create smooth transitions between views. It’s an animation technique that calculates the changes needed to animate view transitions, achieving smooth and natural effects.

You might have noticed this effect in the App Store when you click on a card—it transitions to another screen with a pop and smooth animation, feeling more natural compared to plain screen-to-screen transitions. Smooth transitions make apps feel intuitive and delightful, enhancing the user journey while maintaining visual consistency.

You can apply the Matched Geometry Effect to images, text, and shapes with minimal code, making it possible to achieve such complex animations effortlessly. It's truly fascinating!

Code Structure

P.S.: Excuse the hard-to-read screenshot; I’ll share GitHub links in future posts.

To achieve this, you’ll use the matchedGeometryEffect modifier along with a Namespace. The structure typically involves an if-else block inside a stack, with a button toggle to switch between View 1 and View 2.

In this setup, View 1 and View 2 will share the same matchedGeometryEffect modifier, identified by a unique ID and linked via the Namespace. However, the views can have different size or layout properties—for example, when implementing a card expansion effect.

When the user clicks the button, View 1 transitions to View 2. The Matched Geometry Effect handles the animations seamlessly, matching the layers and creating smooth transitions automatically. It’s that simple yet magical!

Thank you for reading!

If you create something, feel free to share it with me! Also, don’t forget to subscribe to stay updated on all these experiments and demos.

🧑‍💻👩‍💻 If you're interested, get started and learn SwiftUI!

👉 Check out the Prototyping with SwiftUI course By John Rodrigues from here

Do subscribe to stay updated