So in this video, we're going to build the arrow interaction. 1
It goes like this, when mouse hovers over the entire link block, the arrow will move about 8 pixels 2
to the right. 3
And when mouse is out, the arrow returns to its original position. 4
First, we need to choose the trigger. 5
Select the 6
link block, the entire thing, not just the text or the arrow. Then go into interactions panel and click plus. 7
Choose mouse hover. 8
We'll get to this screen and the link block will have this icon on top, to represent that there is 9
some sort of trigger applied to this block, or this element. The same icon will show Inside the Navigator 10
as well. 11
It's a good way to keep track of elements that have interaction applied to them. 12
Note one thing, this icon shows up on the trigger, not what's actually being animated. 13
All right, under On Hover, we are going to select action, which is Start An Animation. To create 14
a custom animation, click this plus icon. And let's name this animation as something like "Arrow move right". 15
This animation is going to do just that, for it to return to its original position, we're going to build 16
a different animation. 17
So this place here is a timeline. Here we can create a sequence of different things happening, that put 18
together creates one full animation. This time as this is a simple animation, we're just going to have 19
2 items here. 20
You see this message on the bottom? 21
When we are inside animation mode, we are able to select different elements on the canvas that we want 22
to animate. 23
So we're going to select the arrow and create a new action for that arrow. 24
Under this, we have several different options to what we can do with this object and how we can animate it. 25
In our case, we already done this and we need to move. We'll get this new, a little more intimidating timeline, 26
but don't worry it's quite straightforward. First, 27
we need to apply some value in the move field, under X axis. So we can move it horizontally. Positive values 28
will move it to the right. And negative values will move it to the left. 29
Put 8 pixels. In case you didn't select the arrow properly, 30
no problem. 31
For instance, if link block appears here, you can change it. Just right click on the element and choose 32
change target. 33
Once you get this new pink message on the bottom, you can select the new element. And the target element 34
for this animation will change. If it's still not working for you, just delete this item and select arrow 35
from start. 36
Press Play icon to see your animation in action. Interactions inside the designer work only by pressing 37
this Play button. To see them in action, 38
either you have to check the preview mode or the live published site. 39
Timing and transition can be edited from here. 40
Right now we have 500 millisecond animation which is way too slow. And Linear easing, which is no easing 41
at all. 42
So, the line will move from start point to the endpoint with constant speed. 43
This doesn't create a nice and smooth transition. 44
So, we're going to choose the values that we already played with: Ease 45
and 200 milliseconds. 0,2 is same as 200 milliseconds. 46
There are 1000 milliseconds in one second. 47
Play the animation again. 48
There. 49
Now it's faster and smoother. 50
All right. 51
We can exit animation mode and check this in the preview mode. 52
Excellent. The arrow moves nicely on hover, but it stays there. Doesn't move back. 53
That's because with interactions we need to specify what happens on the Hover out. 54
Okay. 55
Now how do we get back to our interaction? 56
We need to select the trigger element. Because that's where the interaction is linked to, not the arrow. 57
If you select arrow, you'll see nothing. 58
If you select the link block, now you'll see all interactions that are set on it. 59
This shows that you can have multiple interactions set on each element. Click on the interaction to go 60
inside for editing. 61
Now, under hover, it shows the selected animation that we created. 62
But under Hover Out it's empty, 63
so we need to create an animation for that too. The same way as the last time, 64
select Start An Animation. The list now will show the animation, that we have already created. 65
We need to create another animation and name it something like Arrow Return. Just like last time, select 66
the arrow and click the plus icon to add a new action. The last animation was moving arrow 8 pixels 67
on the X axis. 68
What do you think should be this time? To return to its original position? 69
0 pixels, because 0 pixels on the X axis is the original position. If you played this animation 70
nothing will happen right, now because it's already in its original position. 71
Let's not forget to change the timing settings. 72
We're going to use the same 200 milliseconds and Ease with the transition. Click done, to exit animation 73
mode. 74
Now you can see we have 2 animations one for the hover, another one for the hover out. 75
Let's check the preview mode if that's working as expected. 76
It's working perfectly. 77
Now, how about the rest of the arrows? 78
Do we have to go and do this again for every single arrow? 79
Luckily we don't. 80
You see these trigger settings? The one that says element and class. 81
That's an option to either trigger this interaction only on the selected element, or on the all elements 82
that have the same class applied to them. 83
So we gonna choose that class. And let's see what happens in the preview mode. 84
Amazing. 85
It applied to all the links. 86
We don't have to created for each one. 87
And if in the future, if we want to make edits, we just have to change it in one place. 88
All right. 89
So those are the basics of interactions. 90
There is infinite possibilities of what can be done with interactions in Webflow. 91
You can go, and I would advise to do that, to go to the showcase and you'll see some people make very 92
crazy animations and interactions. And it will give you a good ideas on what can be done inside Webflow. 93
And give you some sort of inspiration for future projects. Interactions in the beginning might 94
look a little daunting. But in reality, once you get over that little hurdle, you'll see how simple they 95
can be and how much fun and how many different options you have to creating something very interactive, 96
something very beautiful and fun. And you'll be able to create complex interactions with just few 97
clicks. Something that would take you probably months of JavaScript practice, in order to achieve that 98
without Webflow. There are more videos about interactions in the Advanced part of this course. Something 99
for you to deepen your knowledge and kind of gain a bit more practice. Although what we have already 100
learned is quite sufficient for you to start working on real projects. In the next section, we're going 101
to take care of the mobile version of our website. 102
Well, home page in this case. And then in the section after that, we're going to learn all about CMS 103
and blog and how to add blog to our website. 104
Stick around.