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, and we will set it to 1 in the final state to create a fade-in effect while the card is moving:

# ACTIVITIES FEED
# Array of the cards
cardsInFeed = [sketch.Card1, sketch.Card2, sketch.Card3, sketch.Card4, sketch.Card5, sketch.Card6];
# Loop to create card states
for card,i in cardsInFeed
    card.states.end =
        y: card.y
        opacity: 1
        animationOptions:
            time: 0.3
            curve: "ease-out"
            delay: i*0.2
    card.states.start =
        opacity: 0
        y: card.y+200
    card.states.switchInstant "start"

As you can see, instead of going through the cards one by one, we have created a card array that contains a reference to each of the cards of our prototype:

cardsInFeed = [sketch.Card1, sketch.Card2, sketch.Card3, sketch.Card4, sketch.Card5, sketch.Card6];

Then, we will loop through the array and assign the start and end states to each of the elements of the array, in this case, our cards:

for card,i in cardsInFeed

To make each card appear 0.2 seconds after the previous one, we have added an index to our loop. We will use its value to increase the value of the delay for each card. The index grows in each iteration, and we will use its value, multiplied by 0.2, to define the delay for each card from the start of the transition, and that will be the number of seconds each card will be stopped before changing its state:

delay: i*0.2

The delay value will be 0 for the first card, and it will be increased 0.2 seconds for each new card.

With the states defined, we just need to add a tap event listener in the sketch.CTA_3 layer, and start the transition of the screen and the cards. We will add a few more lines to add a loop that will animate each of the cards to the end state. We will add the for loop right after the preceding code, leaving it as follows:

sketch.CTA_3.on Events.Tap, ->
    sketch.Feed_Activities_Artboard.animate("in")
    for card in cardsInFeed
        card.animate("end")

Your prototype will now be more visually appealing. With this prototype, we can test different ideas of a welcome tour and check how the users react to different approaches and different contents. Getting the attention of your users in a welcome tour is complicated, so it is advisable to try different versions before developing a definitive one in your application.