O'Reilly logo

UX Design for Mobile by Pau Giner, Pablo Perea

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required