Interactions tool isn't the only way to create interactions on a page. 1
For example, a button changing the background colour on the mouse hover, is an interaction too. When doing 2
something simple like that, we don't need to use interactions tool at all. 3
This can be done from the styles, panel because CSS alone can handle such things. 4
Anything that we can change in the hover state of the element, is going to become hover interaction. 5
This can be background color, size, position, shadows and whatnot. 6
Transitioning from one state to another. 7
As I mentioned before, one of the interactions we are going to build is the arrow animation. 8
So, I want this arrow to move a little towards the right when we move the mouse over this link. 9
We can move elements from the styles panel. And I'm going to show you how to do that. 10
You don't have to follow along with this, because you'll see that we're going to hit a wall with this 11
option. But I still want to show this option, so you can understand when it's best to use styles and when 12
it's best to use interactions tool. Styles panel has a property called transforms, under effects section. 13
Underneath 14
we have several options: Move, Scale, Rotate and Skew. 15
They all do what they say. We're going to only touch the Move this time, as we don't need the rest. 16
Move will move an element on X, Y or Z axis. 17
X and Y are horizontal and vertical axis, but Z axis is, to be honest, I really don't know how to explain 18
Z axis. 19
I don't think I've ever had a need for it. 20
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
something like depth. 22
Most of the time, we'll be using X and Y anyways. As you can see, it's simply moving object horizontally 23
or vertically from its original position. 24
It's sort of what we've already done with a relative and absolute objects. 25
So what I had in mind with this arrow, is to move it horizontally for about 8 pixels. 26
But moving on a regular state isn't going to work, because it will appear like this permanently. 27
We need to move it on a hover, which is quite simple. 28
We do exact the same on the hover state, but leave the regular state untouched. 29
And there, we have a little interaction. 30
The transition from one state to another is very jerky right now. 31
To make it smooth, like a real animation, we need to add something in the transitions property. 32
So, here is why we can't use this basic hover interaction. Because hover interactions from the styles 33
panel, only animate the object itself. 34
In our case, the arrow. 35
But if we move mouse over the text, nothing happens. 36
Hover state affects only the target element and nothing else, but in our case we want the arrow to move 37
when mouse moves over the entire link block. 38
This is where interactions tool comes in, hover states is just a CSS property, but the interaction tool 39
adds a little bit of JavaScript to the mix, which gives us an incredible amount of control. 40
So that's what we're going to do in the next video.