On the right hand side, where all the panels are, there is one dedicated for interactions. 1
There is this toggle for legacy interactions. 2
That's an old version that Webflow used to have. 3
They still keep it though, because there are a lot of websites built on it and designers still have to 4
use it. 5
If you accidentally clicked on it, make sure to switch the toggle off. 6
So, what are interactions? 7
Simply put, it's when user interacts with some object on our page, and by doing so something else happens 8
to this or another object. By using interactions we can have mouse interact with one element. 9
This is called a trigger and animate another object, even if it's completely unrelated. 10
This is called an action. 11
Every interaction starts with the trigger. 12
First, we have to select an element that we want to interact with. 13
And then select the type of the trigger. 14
For example, interaction can trigger on a mouse click or mouse hover and other options. 15
There are also page triggers, which means we don't have to interact with any particular element, but an 16
animation can be triggered by page related actions. 17
For example, when page loads. Each trigger time has its own set of options. 18
For example, mouse hover can be triggered either on Hover or Hover Out. 19
One is when mouse moves on the object and another when it moves away from it. 20
When we build our interaction, we have to specify both of these. What happens on the hover. And what happens 21
on the hover out. 22
And finally, you have actions or in other words animation. In the dropdown you'll see there are several 23
presets like fade, slide and so on. And the first option is the custom animation. And this is where the 24
magic happens. 25
Here we can specify which element gets animated and we can create an entire set of actions that are 26
timed. And we get this timeline of animation with a granular control over each action. 27
So that's a quick and rough overview of interactions. 28
Don't be alarmed if you didn't catch everything. We'll learn this slowly by doing. And in the next video, 29
we'll start with some simple interactions. 30
Stick around.