In this video, we're going to animate these cards right here. 1
It would look really cool if these cards, instead of just being static and just fixed on the photo. 2
If we animated them. I'm thinking something like sliding in from the bottom. In order to animate these 3
cards 4
we need to change our existing lay out a little. 5
The cards are part of the background image right now and as is currently that can't be animated. We'll 6
need these cards as independent images. 7
So, let's go to Figma and export them. 8
These cards have a shadow on them. 9
They're not really doing much. 10
So, let's just get rid of it. If we really want the shadow, 11
we can always add it inside Webflow. 12
We're going to export them in PNG. 13
I've tested this with SVG export, but it came out to be a larger file than PNG. 14
Sometimes that might happen. 15
So you might end up with an SVG that is large in size, so just pay attention to it. 16
Also, we need to export the background photo independently. 17
And of course, let's compress all the images. 18
So let's see, what sort of layout we have and how we can change this layout. 19
So there is our flexbox, which has 2 div blocks inside - image and content wrapper. Inside the image wrapper 20
we have our current image. 21
Here's what we could do. 22
We can put all three of our images inside the image wrapper, or use obsolete positioning for the cards. 23
That way they will be stacked on top of the background image. 24
♫ 25
Let's replace the current photo. 26
All right. 27
Now let's give this image a same class and then apply absolute positioning and go from there. 28
Remember the important adjustment with absolute elements? 29
They need a parent with a relative position. As you can see here right now it says it's relative to the 30
body. 31
We need to be relative to the image wrapper. 32
That way we'll position them exactly where we want. 33
So let's change the image wrappers position to relative. 34
By the way, the second card hasn't disappeared. 35
It's underneath the first one. They are in exact same position because we are using the same class. 36
Now we can position cards on top right corner and then move them from there. We can simply look up the 37
values inside Figma. 38
How much are they separated from the edges and use exactly those values. 39
When inputting these values don't forget to add px at the end. 40
Otherwise, it's going to use percentage value and that's going to send cards somewhere else. 41
Finally, let's move the second card below the first one, we will need to apply a combo class to it. 42
Excellent let's check the responsive fluidity and see if this arrangement is working. 43
As you can see, on the smaller screen size, the cards are covering the model's face. 44
Let's adjust this so this doesn't happen. 45
We could use percentage values in reality, but I don't think there is much need for that. 46
We have space. 47
And now let's do the same thing with a second graphic. 48
Duplicate the Card class instead of creating another combo class. 49
It's going to have a different position on the left anyways. 50
This time we don't need to change the relative position, because the image wrapper is the same class 51
as above. 52
And it is inheriting the same relative positioning. 53
♫ 54
Excellent. Layouts are ready. Now, 55
let's create interactions. 56
So what we want here is for the cards to slide in from the bottom, 57
when this section is scrolling to view. Webflow has a trigger exactly for that. 58
It's this one. Scroll into view. 59
Once you select this option, you'll get two settings. One for when it scrolled into view and one for when 60
it scrolled out of view. We could create a custom animation for this if we wanted to, but Webflow has 61
preset animations which works just fine in this case. 62
So we can choose slide animation. 63
We get these properties to fine tune our animation, click on preview to see what's happening. 64
It's sliding from left by default. 65
We want it to slide from the bottom, which we can change easily from this dropdown. 66
Excellent. 67
Now let's check our preview and see how it's working. 68
Scroll top of the page and go back and forth to the preview mode. 69
This will restart the animation. 70
The card animates way too early for us to notice it. 71
It animates when we are still on the section above. 72
That's because by default it triggers when even just the tip of the card enters the viewport. 73
Luckily, Webflow has an option to adjust that setting. And we can do that from this offset property. 74
Right now it's set to 0 percent. 75
If we set it to something like 50%, this means interaction will only trigger when the card is 76
half way through the screen. 77
Let's see. Halfway through is usually a pretty good trigger for a scroll interaction, because users are 78
usually focusing on whatever is in the middle of the screen. 79
This way, we make sure cards don't animate when the user is still concentrated on something else. 80
It will be very distracting in such cases and they will barely notice the animation. So it will be pointless. 81
Let's add the interaction to the second card now and see how it all looks. 82
I feel like the second card is a little too delayed. 83
I'd prefer if it animated right after the first one, although not at the same time. 84
However promptly after. Let's decrease the offset on the second card to like 45%. That should 85
trigger it a bit earlier. 86
Excellent. 87
Now let's do the same thing for the calendar card. With only one difference. To slide the calendar from 88
the left. Somehow sliding it from the left makes a bit more sense. 89
We haven't set up anything on the scroll out of view. 90
If we wanted these cards to slide in every time user scrolled in and out of the view, then we would have 91
to set up a Slide Out interaction, 92
when it's scrolled out of the view. But I prefer this to animate once and then stay there. 93
It's not a sort of interaction that needs to be continues. These interactions were so simple to set up, 94
but it brought a lot of life to the page. 95
Now page feels a bit more live, a bit more friendly and interactive. Although, be careful with interactions 96
because if they are overdone, they might actually bring worse results than improve the website. 97
One thing is for sure, because the interactions they take a lot of power, like on the graphics card and 98
they might slow down a website. 99
So, on a simple interaction like this, that's not a big deal. 100
It's easy to perform and nothing is going to slow down the website that much. 101
However, when it comes to a bit more complex interaction, some might be not even complex, 102
but the way things are arranged and the way the animation is working on the page, it might actually 103
slow down the website. 104
And if you notice some performance drops and if you see maybe your page is, kind of, like jerky, or something 105
kind of feels slow, or not animating fast. Or, you know, maybe sometimes your laptop might start 106
heating up, because some interaction or animation that you set up is kind of running an infinite 107
loop, or is just not working very well. 108
Then just drop the interactions. And drop the animations. Because no matter what, 109
it's always better to have a website that is super fast and performing well, than something that 110
looks pretty, is animated really well, but it's very slow and people just want to get out of there. 111
This was a simple interaction and we used Webflow's preset animation. In the next video, we're going to 112
build our own custom animation. And that's going to be fun. 113
Stick around.