0
1
00:00:02,760 --> 00:00:05,720
In this video, we're going to animate these cards right here.
1

2
00:00:05,730 --> 00:00:11,080
It would look really cool if these cards, instead of just being static and just fixed on the photo.
2

3
00:00:11,190 --> 00:00:16,900
If we animated them. I'm thinking something like sliding in from the bottom. In order to animate these
3

4
00:00:16,900 --> 00:00:17,180
cards
4

5
00:00:17,190 --> 00:00:19,260
we need to change our existing lay out a little.
5

6
00:00:19,260 --> 00:00:24,120
The cards are part of the background image right now and as is currently that can't be animated. We'll
6

7
00:00:24,120 --> 00:00:26,040
need these cards as independent images.
7

8
00:00:26,040 --> 00:00:28,070
So, let's go to Figma and export them.
8

9
00:00:32,110 --> 00:00:33,860
These cards have a shadow on them.
9

10
00:00:33,880 --> 00:00:35,070
They're not really doing much.
10

11
00:00:35,080 --> 00:00:37,780
So, let's just get rid of it. If we really want the shadow,
11

12
00:00:37,780 --> 00:00:39,870
we can always add it inside Webflow.
12

13
00:00:39,910 --> 00:00:42,040
We're going to export them in PNG.
13

14
00:00:42,130 --> 00:00:46,770
I've tested this with SVG export, but it came out to be a larger file than PNG.
14

15
00:00:46,780 --> 00:00:47,920
Sometimes that might happen.
15

16
00:00:47,920 --> 00:00:52,420
So you might end up with an SVG that is large in size, so just pay attention to it.
16

17
00:00:52,420 --> 00:00:55,470
Also, we need to export the background photo independently.
17

18
00:01:11,750 --> 00:01:14,180
And of course, let's compress all the images.
18

19
00:01:26,150 --> 00:01:29,970
So let's see, what sort of layout we have and how we can change this layout.
19

20
00:01:30,050 --> 00:01:35,900
So there is our flexbox, which has 2 div blocks inside - image and content wrapper. Inside the image wrapper
20

21
00:01:35,900 --> 00:01:37,520
we have our current image.
21

22
00:01:37,570 --> 00:01:38,420
Here's what we could do.
22

23
00:01:38,420 --> 00:01:45,220
We can put all three of our images inside the image wrapper, or use obsolete positioning for the cards.
23

24
00:01:45,260 --> 00:01:59,600
That way they will be stacked on top of the background image.
24

25
00:02:00,050 --> 00:02:11,810
♫
25

26
00:02:31,890 --> 00:02:39,470
Let's replace the current photo.
26

27
00:02:39,890 --> 00:02:40,370
All right.
27

28
00:02:40,380 --> 00:02:45,820
Now let's give this image a same class and then apply absolute positioning and go from there.
28

29
00:03:01,700 --> 00:03:04,120
Remember the important adjustment with absolute elements?
29

30
00:03:04,130 --> 00:03:09,470
They need a parent with a relative position. As you can see here right now it says it's relative to the
30

31
00:03:09,470 --> 00:03:10,210
body.
31

32
00:03:10,310 --> 00:03:12,430
We need to be relative to the image wrapper.
32

33
00:03:12,440 --> 00:03:15,040
That way we'll position them exactly where we want.
33

34
00:03:15,050 --> 00:03:18,090
So let's change the image wrappers position to relative.
34

35
00:03:18,290 --> 00:03:20,440
By the way, the second card hasn't disappeared.
35

36
00:03:20,450 --> 00:03:25,780
It's underneath the first one. They are in exact same position because we are using the same class.
36

37
00:03:25,790 --> 00:03:31,830
Now we can position cards on top right corner and then move them from there. We can simply look up the
37

38
00:03:31,830 --> 00:03:33,130
values inside Figma.
38

39
00:03:33,150 --> 00:03:37,140
How much are they separated from the edges and use exactly those values.
39

40
00:03:45,150 --> 00:03:47,950
When inputting these values don't forget to add px at the end.
40

41
00:03:47,950 --> 00:03:51,810
Otherwise, it's going to use percentage value and that's going to send cards somewhere else.
41

42
00:03:53,790 --> 00:03:58,440
Finally, let's move the second card below the first one, we will need to apply a combo class to it.
42

43
00:04:08,670 --> 00:04:12,880
Excellent let's check the responsive fluidity and see if this arrangement is working.
43

44
00:04:14,590 --> 00:04:18,350
As you can see, on the smaller screen size, the cards are covering the model's face.
44

45
00:04:18,370 --> 00:04:20,770
Let's adjust this so this doesn't happen.
45

46
00:04:20,770 --> 00:04:24,610
We could use percentage values in reality, but I don't think there is much need for that.
46

47
00:04:24,610 --> 00:04:25,480
We have space.
47

48
00:04:32,580 --> 00:04:35,900
And now let's do the same thing with a second graphic.
48

49
00:04:59,030 --> 00:05:02,340
Duplicate the Card class instead of creating another combo class.
49

50
00:05:02,450 --> 00:05:05,050
It's going to have a different position on the left anyways.
50

51
00:05:08,010 --> 00:05:12,160
This time we don't need to change the relative position, because the image wrapper is the same class
51

52
00:05:12,160 --> 00:05:12,740
as above.
52

53
00:05:12,750 --> 00:05:15,750
And it is inheriting the same relative positioning.
53

54
00:05:20,850 --> 00:05:33,300
♫
54

55
00:05:34,880 --> 00:05:36,430
Excellent. Layouts are ready. Now,
55

56
00:05:36,440 --> 00:05:40,250
let's create interactions.
56

57
00:05:40,270 --> 00:05:43,780
So what we want here is for the cards to slide in from the bottom,
57

58
00:05:43,780 --> 00:05:48,190
when this section is scrolling to view. Webflow has a trigger exactly for that.
58

59
00:05:48,190 --> 00:05:50,170
It's this one. Scroll into view.
59

60
00:05:50,230 --> 00:05:56,010
Once you select this option, you'll get two settings. One for when it scrolled into view and one for when
60

61
00:05:56,010 --> 00:06:01,690
it scrolled out of view. We could create a custom animation for this if we wanted to, but Webflow has
61

62
00:06:01,690 --> 00:06:05,020
preset animations which works just fine in this case.
62

63
00:06:05,020 --> 00:06:07,160
So we can choose slide animation.
63

64
00:06:07,240 --> 00:06:11,300
We get these properties to fine tune our animation, click on preview to see what's happening.
64

65
00:06:11,410 --> 00:06:13,340
It's sliding from left by default.
65

66
00:06:13,360 --> 00:06:17,260
We want it to slide from the bottom, which we can change easily from this dropdown.
66

67
00:06:20,190 --> 00:06:20,640
Excellent.
67

68
00:06:20,640 --> 00:06:23,170
Now let's check our preview and see how it's working.
68

69
00:06:23,190 --> 00:06:25,980
Scroll top of the page and go back and forth to the preview mode.
69

70
00:06:25,980 --> 00:06:27,480
This will restart the animation.
70

71
00:06:30,810 --> 00:06:33,510
The card animates way too early for us to notice it.
71

72
00:06:33,510 --> 00:06:36,300
It animates when we are still on the section above.
72

73
00:06:36,300 --> 00:06:41,720
That's because by default it triggers when even just the tip of the card enters the viewport.
73

74
00:06:41,730 --> 00:06:47,410
Luckily, Webflow has an option to adjust that setting. And we can do that from this offset property.
74

75
00:06:47,430 --> 00:06:49,230
Right now it's set to 0 percent.
75

76
00:06:49,230 --> 00:06:54,570
If we set it to something like 50%, this means interaction will only trigger when the card is
76

77
00:06:54,570 --> 00:06:55,990
half way through the screen.
77

78
00:06:56,250 --> 00:07:01,380
Let's see. Halfway through is usually a pretty good trigger for a scroll interaction, because users are
78

79
00:07:01,380 --> 00:07:04,730
usually focusing on whatever is in the middle of the screen.
79

80
00:07:04,740 --> 00:07:10,160
This way, we make sure cards don't animate when the user is still concentrated on something else.
80

81
00:07:10,230 --> 00:07:15,300
It will be very distracting in such cases and they will barely notice the animation. So it will be pointless.
81

82
00:07:15,540 --> 00:07:19,110
Let's add the interaction to the second card now and see how it all looks.
82

83
00:07:39,530 --> 00:07:41,630
I feel like the second card is a little too delayed.
83

84
00:07:41,630 --> 00:07:46,580
I'd prefer if it animated right after the first one, although not at the same time.
84

85
00:07:46,760 --> 00:07:52,580
However promptly after. Let's decrease the offset on the second card to like 45%. That should
85

86
00:07:52,580 --> 00:07:53,840
trigger it a bit earlier.
86

87
00:08:01,650 --> 00:08:02,310
Excellent.
87

88
00:08:02,310 --> 00:08:07,920
Now let's do the same thing for the calendar card. With only one difference. To slide the calendar from
88

89
00:08:07,920 --> 00:08:23,040
the left. Somehow sliding it from the left makes a bit more sense.
89

90
00:08:23,120 --> 00:08:25,510
We haven't set up anything on the scroll out of view.
90

91
00:08:25,520 --> 00:08:31,040
If we wanted these cards to slide in every time user scrolled in and out of the view, then we would have
91

92
00:08:31,040 --> 00:08:33,060
to set up a Slide Out interaction,
92

93
00:08:33,410 --> 00:08:37,700
when it's scrolled out of the view. But I prefer this to animate once and then stay there.
93

94
00:08:37,760 --> 00:08:43,560
It's not a sort of interaction that needs to be continues. These interactions were so simple to set up,
94

95
00:08:43,600 --> 00:08:46,160
but it brought a lot of life to the page.
95

96
00:08:46,200 --> 00:08:51,450
Now page feels a bit more live, a bit more friendly and interactive. Although, be careful with interactions
96

97
00:08:51,450 --> 00:08:57,370
because if they are overdone, they might actually bring worse results than improve the website.
97

98
00:08:57,380 --> 00:09:03,150
One thing is for sure, because the interactions they take a lot of power, like on the graphics card and
98

99
00:09:03,280 --> 00:09:05,060
they might slow down a website.
99

100
00:09:05,070 --> 00:09:07,890
So, on a simple interaction like this, that's not a big deal.
100

101
00:09:07,890 --> 00:09:12,230
It's easy to perform and nothing is going to slow down the website that much.
101

102
00:09:12,240 --> 00:09:16,100
However, when it comes to a bit more complex interaction, some might be not even complex,
102

103
00:09:16,110 --> 00:09:21,720
but the way things are arranged and the way the animation is working on the page, it might actually
103

104
00:09:21,720 --> 00:09:23,430
slow down the website.
104

105
00:09:23,510 --> 00:09:29,790
And if you notice some performance drops and if you see maybe your page is, kind of, like jerky, or something
105

106
00:09:29,790 --> 00:09:36,810
kind of feels slow, or not animating fast. Or, you know, maybe sometimes your laptop might start
106

107
00:09:36,820 --> 00:09:41,880
heating up, because some interaction or animation that you set up is kind of running an infinite
107

108
00:09:41,880 --> 00:09:43,980
loop, or is just not working very well.
108

109
00:09:44,220 --> 00:09:48,810
Then just drop the interactions. And drop the animations. Because no matter what,
109

110
00:09:48,810 --> 00:09:54,000
it's always better to have a website that is super fast and performing well, than something that
110

111
00:09:54,000 --> 00:09:59,210
looks pretty, is animated really well, but it's very slow and people just want to get out of there.
111

112
00:09:59,280 --> 00:10:04,770
This was a simple interaction and we used Webflow's preset animation. In the next video, we're going to
112

113
00:10:04,770 --> 00:10:08,250
build our own custom animation. And that's going to be fun.
113

114
00:10:08,250 --> 00:10:08,660
Stick around.