SwiftUI - Synchronize Animations using matchedGeometryEffect()

In the previous blog, we have already seen how to create basic animations in SwiftUI using the animation modifier or using the withAnimation closure. This blog post will show how we can synchronize the animation using the matchedGeometryEffect modifier. The matchedGeometryEffect modifier allows you to create smooth transitions between two different views with the same elements. Like, in the youtube application when we minimize the video player by swiping down on the video.

The matchedGeometryEffect takes an identifier as input and a namespace.

As you can see in the below example without the matchedGeometryEffect modifier, a simple fade animation transition is used between the views. But when we provide an identifier to the views using the matchedGeometryEffect modifier, SwiftUI will automatically create a smooth transition between the two views with the same id.

Without matchedGeometryEffect With matchedGeometryEffect
without with

Here is the code for the above example.

matchedGeometryEffect is a very powerful API, using which we can create many complex shared element transitions to improve the user experience of an application.

More blogs on SwiftUI are incoming, so stay tuned!

Dhruv Tailor

Dhruv Tailor

Software Engineer developing mobile apps at PLG Works
Surat, Gujarat