How to Make a Modified AppStore-like Animation

In the mobile world everybody knows how a great UI may increase user engagement, retention rates and overall delight from using your application. And it’s impossible to imagine any really cool design without beautiful animations. So today we’re going to build one on our own!

More specifically, we're going to share with you our insights on how to make the nice AppStore-like animation with some interesting modifications. Let’s get it started!

👨‍💻 Step 1: Setup a Layout

Finally, we have something to work with and are ready to create the outstanding AppStore-like animation. Let’s take a closer look at what should be done.

⚙️ Step 2: Developing the Animation

So what do we expect from our animation?

When you select a cell, this is what you should see:

• The selected cell expands to the full screen;
• Its corner radius equals 0;
• The status bar is hidden;
• The collection view’s isScrollEnabled is false.

When you tap again on the selected cell, the following things should happen:

• The selected cell collapses to its initial frame;
• The selected cell’s corner radius is back to its initial value;
• The status bar is visible again;
• The collection view’s isScrollEnabled is true.

So, if we translate this into the coding language, it will look similar to this:

Hmm, looks like we forgot about the fact that each next cell is higher at the layer level than the previous one. At that moment we thought: what if… we’ll solve this problem and add a cool feature at the same moment?

Namely, we’ll force visible cells (except the selected one) to hide from the screen. Eventually, it should seem that the selected cell pushes the remaining cells off the screen. Let’s implement it and check how it looks!

🛠️ Step 3: Adding a Modification to Our Animation

First, we will add a new property called hiddenCells. We need to remember which cells will be hidden, so that later we can show them back on the screen.

🏆 And Finally…

Let's see our final version!