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