The first approach consists of showing the filled-bookmark icons on top of the original ones when an item is bookmarked. In order to do so, we'll add a filled version of the bookmark icon on top of the empty one and control the opacity with an animation when the user clicks on the corresponding area.

First, we start by creating a new Hype prototype using a 360x640 px scene and adding the activities view mock-up as a layer in the background. Next, we add the filled-bookmark icon as a new layer, placing it on top of the bookmark icon of the first element in the list.

Initially the bookmark icon will be empty, thus we set the opacity of the active bookmark layer to 0%. Now we need to define a transition to change the element opacity from 0% to 100%. In order to do so, we'll create a new timeline.

By clicking on the timeline selector on top of the list of layers--initially displaying "Main Timeline"--we have the option to create a new timeline. In this case, we'll create a timeline named "toggle-bookmark1". In the timeline, we need to capture the transition for the opacity property of the bookmark layer. So, click on the recording button and place the timeline to half a second from the starting point and change the opacity to 100% in the properties panel for the bookmark layer. This will generate two keyframes for the opacity property to represent the edge values of this transition from transparent to opaque. After you stop recording changes, you can still adjust them--feel free to play with the keyframes to make the transition longer, shorter, or introduce a delay.

The transition we defined in the timeline needs to be triggered by a user interaction. Since the bookmark icon has a small surface, we will create a transparent rectangle as the top layer above it. In the example, it is named act-bookmark1.

By creating a new action, we can make the timeline play as the user clicks on the active area for the bookmark. To do this, we will create a Continue Timeline... action for the click event. If we preview the prototype at this point, we'll note that marking as a bookmark works, but unmarking it does not. In order to support the reverse interaction, we'll extend the timeline to include both transitions. In this way, the animation will be played in two steps--the first part will make the bookmark appear, and continuing to the second part will make it go away.

Since we want to play the animation in two steps, we'll add a pause action to separate both parts. In the timeline, there is a special row above all layers named Timeline Actions. You can use it to create actions for specific points in time. These actions can control the current or other timelines, as well as trigger more complex logic defined by the user in JavaScript functions. In this case, we want to add a pause action for the current timeline.

As a result, the animation will make the bookmark appear and pause at 0.5 seconds. The next time the user acts on the bookmark, the animation will continue playing, making the bookmark transparent again. Since the animation is played in two steps, it is important for the action that triggers the animation to be Continue Timeline instead of Start Timeline, otherwise the timeline will start from the beginning each time.

Now, the bookmark animation will work to set and unset the bookmarked state for the item as many times as you like.