1
00:00:00,760 --> 00:00:04,420
Hey, in this video, I’m going to show you
how to use the tap gesture to make

2
00:00:04,420 --> 00:00:06,760
a floating action button fling out related actions.

3
00:00:08,200 --> 00:00:11,880
As soon as you import the assets, you’ll
see we have a floating action button,

4
00:00:11,880 --> 00:00:15,160
3 related action buttons, and a background image showing  our photo app.

5
00:00:16,420 --> 00:00:19,160
Add a shadow to all four buttons to add some depth.

6
00:00:20,840 --> 00:00:24,000
Then, rearrange them so that the print, share, and upload buttons

7
00:00:24,020 --> 00:00:26,220
are centered behind the floating action button.

8
00:00:28,560 --> 00:00:32,439
The first thing we want to do is create a
tap gesture on the floating action button.

9
00:00:32,440 --> 00:00:34,840
Upon selecting the floating action button,
you’ll see a lightning bolt,

10
00:00:34,840 --> 00:00:36,480
which reveals gesture options.

11
00:00:37,040 --> 00:00:41,300
Select “Tap” and drag the spaghetti code
arrow on top of the artboard, which will automatically

12
00:00:41,300 --> 00:00:43,200
duplicate it for us in its current state.

13
00:00:43,680 --> 00:00:48,280
To transform the plus icon into an x icon,
rotate the floating action button by 45 degrees

14
00:00:48,280 --> 00:00:49,460
on this new artboard.

15
00:00:49,720 --> 00:00:54,620
Then, create another tap gesture linking this
x icon back to its original state.

16
00:00:54,620 --> 00:00:57,680
Preview the interaction in the viewer to make
sure it’s working as expected.

17
00:00:58,320 --> 00:01:02,220
To make the interaction even smoother, click
on the floating action button tap transition arrow

18
00:01:02,220 --> 00:01:05,500
above, which will reveal the animation
properties.

19
00:01:05,940 --> 00:01:11,160
In this case, we only want to change the curve
from the default one to be both “Ease-in-and-out”.

20
00:01:12,000 --> 00:01:16,860
For consistency, let’s apply the same curve
to the reverse floating action button tap transition.

21
00:01:20,980 --> 00:01:22,240
Looking good.

22
00:01:23,040 --> 00:01:25,440
Now we want to show the print, share, and
upload buttons fling up

23
00:01:25,460 --> 00:01:27,760
from behind the floating action button.

24
00:01:33,760 --> 00:01:36,620
The interaction works perfectly well, but
it’s not very delightful,

25
00:01:36,620 --> 00:01:38,460
so let's add some bounce to it.

26
00:01:42,400 --> 00:01:45,480
Choose “Spring” as the curve type for
each of the three buttons.

27
00:01:52,600 --> 00:01:55,860
Set the friction to 15 instead of 20 for even
more bounce.

28
00:02:02,800 --> 00:02:04,460
Looking good.

29
00:02:06,260 --> 00:02:10,960
Lastly, set the curve of these 3 buttons to
“Ease Out” on the reverse tap transition.

30
00:02:14,380 --> 00:02:15,700
That’s it!