Recreating Instagram Stories Animation with SwiftUI

Photo by Alexander Shatov on Unsplash

Instagram is one of the most used social media applications.Opening stories in Instagram has beautiful animation. Let us create this animation using SwiftUI.

Let us use very simple model:

struct Person: Identifiable {
var image: String
var id = UUID()
}

This animation can be achieved using Matched Geometry Effect. We will create a namespace where our animation occur. Then we will create a sample array of persons. Also we need a state variable to show the story of selected person.

@Namespace var namespace
var persons: [Person] = ["star","1.circle","2.circle","3.circle","4.circle","5.circle","6.circle"].map({Person(image: $0)})
@State var selected: Person?

So, we need two screens. One is a Home Screen where stories are shown on top of screen and the other shows the story of selected person. For simplicity, we are assuming the image itself is a story that will appear on latter screen.

In the above view, we display the list of persons and then add matchedGeometryEffect modifier to the Image of person add tag person.id.

In the similar way, we will add matchedGeometryEffect to the image of selected person and tag with selected person id. Along with this include changes of selected variable inside withAnimation block.

Here is the output :

Here is the complete code.

Thanks for Reading:))