For this prototype, we want to simulate a welcome tour for our app. The welcome tour consists of three panels that the user can move through in order to learn the basics of the app.

We will add each view as a separate layer next to each other. Only the first one will fit into the initial viewport at first. We can group the layers to make it easy to manipulate them together.

We'll use a new timeline--named tour--to recreate the movement of the panels. In this timeline, we'll record two keyframes at regular intervals of 0.5 seconds where the group moves to the left making the next panel visible.

In the preceding example, we are moving the three panels at the same time, but feel free to experiment moving them at different paces and creating some overlaps.

Unlike previous animations, this one won't be triggered when clicking or tapping on an element. We'll control this animation as we drag the panels. This will create the impression that we control their movement. In order to achieve this, we just need to create a new Control Timeline... action for the group of panels based on the On Drag event. This action allows us to play a timeline as we drag our fingers over an element.

There are some aspects we need to specify, for example, the dragging Axis indicates whether the dragging action is applied vertically or horizontally, and the Direction property indicates how the user needs to move their finger through the axis to make the timeline play. In our example, we'll set the action to use the horizontal axis in the reverse direction. This makes the timeline play as the user drags the element horizontally from right to left.

For the drag action, you can also control the speed at which the timeline will be played as the user's finger moves and whether the animation can remain incomplete when the user stops dragging. The Continue after drag option prevents the timeline remaining at an intermediate point. This is very convenient for our example since we only want the views to remain at specific positions.

If we preview the prototype, we'll notice that dragging the tour view to reach the next panel leads to the last panel since the animation continues until the end of the timeline. One way to make sure that the second screen is considered is to add a pause action at that point.

In this way, the animation will always stop at a point that makes sense. If you move to an intermediate point between the first and the second panel, the view will adjust to reach one of those steps, but won't remain in an in-between position.

Dragging to control a timeline allows any animation to happen as the user moves their finger. This is a powerful mechanism to create rich experiences. However, if we don't need such level of detail, there is a simplified way to get a similar result.

As an alternative, we can access the scene panel and use the general swipe right and swipe left actions. Those actions can continue the timeline to play backward or forward as a result of the user making a swipe gesture. In this case, the animation will only happen after the user completes the gesture.

Feel free to use the more elaborate drag approach or a simplified swipe gesture depending on the specific needs of your prototype.