0
1
00:00:03,320 --> 00:00:08,440
On the right hand side, where all the panels are, there is one dedicated for interactions.
1

2
00:00:09,420 --> 00:00:12,310
There is this toggle for legacy interactions.
2

3
00:00:12,340 --> 00:00:14,590
That's an old version that Webflow used to have.
3

4
00:00:14,590 --> 00:00:18,790
They still keep it though, because there are a lot of websites built on it and designers still have to
4

5
00:00:18,790 --> 00:00:19,550
use it.
5

6
00:00:19,660 --> 00:00:24,100
If you accidentally clicked on it, make sure to switch the toggle off.
6

7
00:00:24,100 --> 00:00:25,290
So, what are interactions?
7

8
00:00:25,290 --> 00:00:32,470
Simply put, it's when user interacts with some object on our page, and by doing so something else happens
8

9
00:00:32,470 --> 00:00:38,490
to this or another object. By using interactions we can have mouse interact with one element.
9

10
00:00:38,500 --> 00:00:43,840
This is called a trigger and animate another object, even if it's completely unrelated.
10

11
00:00:43,840 --> 00:00:45,100
This is called an action.
11

12
00:00:47,910 --> 00:00:50,150
Every interaction starts with the trigger.
12

13
00:00:50,190 --> 00:00:53,430
First, we have to select an element that we want to interact with.
13

14
00:00:54,720 --> 00:00:56,770
And then select the type of the trigger.
14

15
00:00:56,880 --> 00:01:01,730
For example, interaction can trigger on a mouse click or mouse hover and other options.
15

16
00:01:06,370 --> 00:01:11,260
There are also page triggers, which means we don't have to interact with any particular element, but an
16

17
00:01:11,260 --> 00:01:14,570
animation can be triggered by page related actions.
17

18
00:01:14,590 --> 00:01:21,600
For example, when page loads. Each trigger time has its own set of options.
18

19
00:01:21,670 --> 00:01:26,420
For example, mouse hover can be triggered either on Hover or Hover Out.
19

20
00:01:26,440 --> 00:01:30,670
One is when mouse moves on the object and another when it moves away from it.
20

21
00:01:30,700 --> 00:01:35,950
When we build our interaction, we have to specify both of these. What happens on the hover. And what happens
21

22
00:01:35,950 --> 00:01:36,820
on the hover out.
22

23
00:01:39,570 --> 00:01:44,420
And finally, you have actions or in other words animation. In the dropdown you'll see there are several
23

24
00:01:44,420 --> 00:01:50,210
presets like fade, slide and so on. And the first option is the custom animation. And this is where the
24

25
00:01:50,210 --> 00:01:51,080
magic happens.
25

26
00:01:51,080 --> 00:01:56,180
Here we can specify which element gets animated and we can create an entire set of actions that are
26

27
00:01:56,180 --> 00:02:01,730
timed. And we get this timeline of animation with a granular control over each action.
27

28
00:02:08,570 --> 00:02:10,730
So that's a quick and rough overview of interactions.
28

29
00:02:10,730 --> 00:02:15,740
Don't be alarmed if you didn't catch everything. We'll learn this slowly by doing. And in the next video,
29

30
00:02:15,740 --> 00:02:18,090
we'll start with some simple interactions.
30

31
00:02:18,170 --> 00:02:18,680
Stick around.