UX Design for Mobile

Coordinating animations

Now, let's add a little more detail to the artboard entry transition Feed Activities Artboard. To do this, we will move each of the cards that make up the contents of this view independently.

Our transition will consist of moving each card 0.2 seconds after its predecessor. In this way, cards will appear in the list in a more organic way than if they were moving together as a single block. For this, we will define two states: the start state, which will position each of the cards at 200 pixels below their initial position on the design, and the end state, where we will define their final position as the position in which they appear in the design. In the start state, we will also change the opacity of the card to 0, ...