0
1
00:00:03,140 --> 00:00:06,480
Interactions tool isn't the only way to create interactions on a page.
1

2
00:00:06,500 --> 00:00:11,660
For example, a button changing the background colour on the mouse hover, is an interaction too. When doing
2

3
00:00:11,660 --> 00:00:14,690
something simple like that, we don't need to use interactions tool at all.
3

4
00:00:14,690 --> 00:00:19,240
This can be done from the styles, panel because CSS alone can handle such things.
4

5
00:00:19,250 --> 00:00:23,710
Anything that we can change in the hover state of the element, is going to become hover interaction.
5

6
00:00:23,750 --> 00:00:26,890
This can be background color, size, position, shadows and whatnot.
6

7
00:00:26,900 --> 00:00:29,090
Transitioning from one state to another.
7

8
00:00:29,150 --> 00:00:33,320
As I mentioned before, one of the interactions we are going to build is the arrow animation.
8

9
00:00:33,350 --> 00:00:38,000
So, I want this arrow to move a little towards the right when we move the mouse over this link.
9

10
00:00:38,000 --> 00:00:41,500
We can move elements from the styles panel. And I'm going to show you how to do that.
10

11
00:00:41,510 --> 00:00:45,740
You don't have to follow along with this, because you'll see that we're going to hit a wall with this
11

12
00:00:45,740 --> 00:00:51,170
option. But I still want to show this option, so you can understand when it's best to use styles and when
12

13
00:00:51,170 --> 00:00:56,660
it's best to use interactions tool. Styles panel has a property called transforms, under effects section.
13

14
00:00:56,920 --> 00:00:57,370
Underneath
14

15
00:00:57,380 --> 00:01:00,730
we have several options: Move, Scale, Rotate and Skew.
15

16
00:01:00,860 --> 00:01:05,780
They all do what they say. We're going to only touch the Move this time, as we don't need the rest.
16

17
00:01:05,780 --> 00:01:09,380
Move will move an element on X, Y or Z axis.
17

18
00:01:09,560 --> 00:01:15,230
X and Y are horizontal and vertical axis, but Z axis is, to be honest, I really don't know how to explain
18

19
00:01:15,230 --> 00:01:16,190
Z axis.
19

20
00:01:16,190 --> 00:01:17,980
I don't think I've ever had a need for it.
20

21
00:01:17,990 --> 00:01:25,010
It's basically for moving an object in a 3D space, so if X and Y is width and height then Z should be
21

22
00:01:25,010 --> 00:01:26,230
something like depth.
22

23
00:01:26,300 --> 00:01:31,850
Most of the time, we'll be using X and Y anyways. As you can see, it's simply moving object horizontally
23

24
00:01:31,850 --> 00:01:35,010
or vertically from its original position.
24

25
00:01:35,210 --> 00:01:39,240
It's sort of what we've already done with a relative and absolute objects.
25

26
00:01:39,260 --> 00:01:43,810
So what I had in mind with this arrow, is to move it horizontally for about 8 pixels.
26

27
00:01:43,910 --> 00:01:48,480
But moving on a regular state isn't going to work, because it will appear like this permanently.
27

28
00:01:48,500 --> 00:01:51,060
We need to move it on a hover, which is quite simple.
28

29
00:01:51,080 --> 00:01:55,320
We do exact the same on the hover state, but leave the regular state untouched.
29

30
00:02:00,980 --> 00:02:02,740
And there, we have a little interaction.
30

31
00:02:02,810 --> 00:02:05,810
The transition from one state to another is very jerky right now.
31

32
00:02:05,810 --> 00:02:10,750
To make it smooth, like a real animation, we need to add something in the transitions property.
32

33
00:02:10,760 --> 00:02:16,280
So, here is why we can't use this basic hover interaction. Because hover interactions from the styles
33

34
00:02:16,280 --> 00:02:19,400
panel, only animate the object itself.
34

35
00:02:19,400 --> 00:02:20,560
In our case, the arrow.
35

36
00:02:20,840 --> 00:02:23,860
But if we move mouse over the text, nothing happens.
36

37
00:02:23,870 --> 00:02:29,360
Hover state affects only the target element and nothing else, but in our case we want the arrow to move
37

38
00:02:29,360 --> 00:02:32,120
when mouse moves over the entire link block.
38

39
00:02:32,120 --> 00:02:38,120
This is where interactions tool comes in, hover states is just a CSS property, but the interaction tool
39

40
00:02:38,120 --> 00:02:42,830
adds a little bit of JavaScript to the mix, which gives us an incredible amount of control.
40

41
00:02:42,920 --> 00:02:44,930
So that's what we're going to do in the next video.