Chapter 34
ScrollViewReader and Grid Animation

Earlier, I introduced you the new matchedGeometryEffect modifier and showed you how to create some basic view animations. In this chapter, let's see how to use the modifier and animate item selection of a grid view. On top of that, you will learn another brand new UI component called ScrollViewReader.

The Demo App

Before we step into the implementation, let me show you the final deliverable. This should give you an idea about what you are going to build. When developing some real world apps, you may need to display a grid of photo items and let users select some of the items.

One way of presenting the item selection is to have a dock at the bottom of the screen. When an item is selected, it is removed from the grid and insert it into the dock. As you select more items, the dock will hold more items. You can swipe horizontally to navigate through the items in the dock. If you tap an item in the dock, that item will be removed and insert it back to the grid. Figure 1 illustrates how the insertion and removal of an item works.

Figure 1. The demo app
Figure 1. The demo app

We will implement the grid view and the item selection. Needless to say, we will use the matchedGeometryEffect modifier to animate the selection.

To access the full content and the source code, please get the official version of the book at

results matching ""

    No results matching ""