In the former examples, the animations defined have been quite simple. We have created transitions for a few properties such as opacity and position, but we haven't paid much attention to the timing and acceleration of those transitions. In this prototype, we will create a much more complex animation.

Changing to a completely different view requires users to reorient. When transitions provide continuity between two views, it helps the user connect the dots. In our example, the list of activities and the detail activity both use an image to represent the specific activity. We can use that image to make the relationship between the two views easier to understand.

The transition is organized in the following steps:

1. The activities view contents fade away as an expanding circle grows behind the activity thumbnail.
2. The activity image moves to the center of the view and grows in size.
3. As the image grows, it fades out, and the image from the detail view fades in.
4. Finally, the information panel of the detail view appears as it moves up in different stages--showing the content first and then the title.

Given this sequence of transitions, we'll need to break the views into different pieces to be able to move them independently. For the activities page, we can use a single image, but we'll need the thumbnail image as a separate layer placed on top of it.

In order to fade the contents out and keep the focus on the image thumbnail, we'll use an expanding circle that grows from the thumbnail. We can either use an ellipse shape in Hype or just add a separate image of a circle. In this example, we are using an image of a circle big enough to cover most of the screen--979x979 px. We need to make sure that we set the circle to the original size, place it between the activities layer and the thumbnail, and center its position with the thumbnail image.

Initially, the circle will be hidden behind the thumbnail. We can use the Scale property from the Metrics tab of the properties panel to make the circle 10% of its original size. We'll also adjust the opacity to make it transparent.

Now that we have the initial state ready, we can create a new timeline to define the transition. We'll create the transition timeline and an active area over the first item in the list to play the timeline.

When recording the timeline, the first keyframe will be in charge of making the circle grow and become opaque at the same time. At 0.4 seconds after the timeline starting point, we will change the Opacity to 100% and the Scale to 120%.

The next transition to support is for the thumbnail to move horizontally to the center of the screen. We want this movement to happen 0.3 seconds after the circle transition completes. By default, creating a new keyframe will define a transition starting from the previous keyframe for that property or the timeline origin. However, you can move the timeline recording origin to any point in order to control the starting point for the transition. To do this, you can drag the gray area that appears close to the origin of the timeline when recording.

In case you didn't set the timeline recording origin while creating the transition, you can always adjust its starting point afterward.

The next step in the animation is to make the thumbnail grow and vanish as the real background emerges. In order to support this, we'll add the background from the details view as a new layer on top of the thumbnail and initially set it as transparent. We add new transitions to the timeline to make the thumbnail scale to 180% and become transparent and the details background to become 100% opaque. In this case, the transitions won't happen both at the same time or strictly one after the other.

Rather, we overlap some of the transitions partially to create a more organic transformation, making the thumbnail scale, but they only start vanishing as the scaling transition reaches the end and the background starts to fade in.

The only remaining part to complete this transition is to show the information details. We have organized the details in three pieces--the details panel, the title of the event, and a shadow gradient--that makes the title text more readable over the background image. To facilitate the manipulation of these pieces, we'll create a group for their layers called Details. Initially, the title and gradient layers will be placed behind the Details panel, so they will only be visible once they move above the Details.

For the details group, we want them to appear from the bottom. However, to make the transition more fluent, we don't want the details to move all the way from the bottom of the screen. Instead, we move the original position of the group a few pixels down, set their opacity to 0%, and define a transition where the group fades in as it moves up, reaching its intended position.

The shadow gradient and the title will appear one after the other once the group reaches its final position. Moving individual elements inside a group is totally okay, but keep in mind that if the group is also moving, both movements will apply.

In the real world, objects are exposed to friction and inertia, and their motion often presents some initial acceleration and final deceleration, which corresponds to the ease in out timing function that Hype uses by default. However, in the case of the details panel, since it enters the scene as an object which is already in motion, it does not make sense to start with an initial acceleration, so we just use an Ease Out function instead.

We select the details group transition and change the timing function from the timeline. When selecting Ease Out, some different options are available with different acceleration patterns; we'll use the Cubic one.

At this point, we have completed a multi-step animation that helps orient the user in a pleasant way when they are changing views. Feel free to experiment with different timing functions and combine animations in different ways, such as presenting one after another, overlapping them, or introducing delays.