1 00:00:00,500 --> 00:00:07,130 All right, finally, we arrived at our main attractions, the bubble animation, so let's go to our 2 00:00:07,130 --> 00:00:14,070 website and let's also go to text editor now for a bubble animation. 3 00:00:14,390 --> 00:00:23,300 And first of all, to have the photo and create a date with the class actually idea of bubbles. 4 00:00:28,570 --> 00:00:35,290 Now, within here, going to create an image tag and I'm going to choose our bubble form image container 5 00:00:35,740 --> 00:00:42,730 and now I'm going to come up with this, I think it was one, two, three, four, five, six, seven 6 00:00:42,730 --> 00:00:43,330 times. 7 00:00:44,170 --> 00:00:44,600 So let's go. 8 00:00:44,620 --> 00:00:48,430 One, two, three, four, five, six, seven. 9 00:00:50,060 --> 00:00:53,420 OK, that's it now I need to go to the success. 10 00:00:55,430 --> 00:01:04,010 Now, let's, first of all, start our bubbles so as to hear Bubbles animation. 11 00:01:06,150 --> 00:01:08,060 Let's grab on to the idea of bubbles. 12 00:01:11,610 --> 00:01:18,300 And we need to size them so as the width of 85 pixels. 13 00:01:20,010 --> 00:01:31,140 Height of one hundred pixels and the opacity of point three, and now we need to create a keyframe. 14 00:01:32,900 --> 00:01:38,360 Now, this keyframe, well, at Keyframe was called bubble. 15 00:01:41,260 --> 00:01:47,830 And it's going to go at going to start at zero percent with a transform. 16 00:01:49,590 --> 00:01:59,460 Of translate on the y axis of zero, and it will also have a capacity of zero, so they will pretty 17 00:01:59,460 --> 00:02:03,570 much be invisible at zero percent, then at 30 percent. 18 00:02:06,840 --> 00:02:12,690 They're having a paucity of one and they'll keep going with this percentage. 19 00:02:14,130 --> 00:02:15,000 Till they reach. 20 00:02:16,220 --> 00:02:23,030 One hundred percent, so this will be 50 and this will be 70. 21 00:02:24,200 --> 00:02:25,100 And the last one. 22 00:02:26,900 --> 00:02:28,130 We'll be 100 percent. 23 00:02:31,300 --> 00:02:40,600 One hundred, but at one hundred percent, I will also do another translation and a translator on the 24 00:02:40,600 --> 00:02:44,980 Y axis of minus 80 minus. 25 00:02:46,570 --> 00:02:48,410 At Newport Heights. 26 00:02:49,540 --> 00:02:51,280 So how will this look? 27 00:02:52,240 --> 00:02:58,330 Well, our bubbles are, first of all, not here where bubbles are still need a bit of a little bit 28 00:02:58,330 --> 00:02:58,850 of standing. 29 00:02:59,740 --> 00:03:01,780 Now, first of all, let's include this animation. 30 00:03:01,780 --> 00:03:03,310 So animation. 31 00:03:05,120 --> 00:03:08,670 And bubbles or bubble. 32 00:03:09,110 --> 00:03:16,000 Now let's go underneath all this and grab onto the bubble again, and this would be actually the image 33 00:03:16,130 --> 00:03:17,240 they want to start to continue. 34 00:03:17,270 --> 00:03:19,040 This is each bubble itself. 35 00:03:19,070 --> 00:03:28,970 So after the first tightening here, the within the only the images which are within our bubble it and 36 00:03:28,970 --> 00:03:36,100 I'm going to style the bubble, it itself bubbles keyframe. 37 00:03:36,110 --> 00:03:44,210 You will go down here and now will style our bubble container and this lovely width of one hundred percent. 38 00:03:50,230 --> 00:03:52,180 There's going to be this pleaders Fleck's. 39 00:03:54,300 --> 00:04:00,120 And we're going to align items to the center not only by doing this. 40 00:04:01,210 --> 00:04:02,800 We will have here our bubbles. 41 00:04:03,850 --> 00:04:07,080 OK, now let's paste them up so they're kind of smooshed together slow. 42 00:04:07,110 --> 00:04:11,920 I want them to be spaced up, spaced with. 43 00:04:13,050 --> 00:04:19,740 No space between, so let's go in here and justify the content with space between. 44 00:04:24,100 --> 00:04:31,450 Now the bubbles are positioned up in the top container, but I want them to be at the bottom, so we 45 00:04:31,450 --> 00:04:34,600 need positioned and absolute and to the bottom. 46 00:04:37,370 --> 00:04:41,600 With the value of zero now all but also down here. 47 00:04:42,960 --> 00:04:48,690 But you know what, I don't want the bubbles to interfere with our container or image container right 48 00:04:48,690 --> 00:04:51,720 here, so let's change this with. 49 00:04:52,780 --> 00:04:59,700 Around, OK, because this still gives a bit of space to left and right of the items. 50 00:05:04,110 --> 00:05:05,730 Now, are you ready to start animation? 51 00:05:05,760 --> 00:05:13,770 I believe so for this, we're just going to go in here and see the animation, take seven seconds. 52 00:05:14,250 --> 00:05:21,440 They should be linear and it should be infinite at the initial in the net, let's say. 53 00:05:21,450 --> 00:05:23,150 And let's take a look at our bubbles. 54 00:05:23,610 --> 00:05:24,690 Now, that's pretty awesome. 55 00:05:24,690 --> 00:05:31,260 But they are bubbling up in a row and they do have the same dimensions. 56 00:05:31,260 --> 00:05:33,240 So how can we fix this? 57 00:05:34,350 --> 00:05:35,820 Well, it's pretty simple. 58 00:05:35,820 --> 00:05:43,080 We just need to take care of each of them individually and we're going to achieve this by targeting. 59 00:05:44,420 --> 00:05:45,620 The idea of bubbles. 60 00:05:50,950 --> 00:05:58,540 Within them, the image tag, and now I'm going to select the first image tag by using our and child 61 00:05:59,350 --> 00:06:06,520 and one now the first child, we going to have an animation delay of two seconds. 62 00:06:06,910 --> 00:06:14,560 And we're also going to changes it to 20 pixels and its height to 25 pixels. 63 00:06:15,520 --> 00:06:17,970 So let's take a look at our first child. 64 00:06:18,700 --> 00:06:25,780 He used small wonder, does the first child and you can see it has delay, so it's no longer in line 65 00:06:25,780 --> 00:06:26,770 with our bubbles. 66 00:06:27,810 --> 00:06:31,270 OK, so we're going to mess around with this a bit. 67 00:06:31,680 --> 00:06:34,260 One, two, three, four, five, six, seven, eight. 68 00:06:34,280 --> 00:06:37,770 One, two, three, four, five, six. 69 00:06:37,770 --> 00:06:39,920 And with the other one up, there should be seven. 70 00:06:40,620 --> 00:06:43,050 So I'm the second child. 71 00:06:44,610 --> 00:06:47,070 To a delay of one second. 72 00:06:48,000 --> 00:06:51,570 And let's increase this to 40 and 40. 73 00:06:53,080 --> 00:06:53,590 Five. 74 00:06:55,960 --> 00:07:02,830 The first child, you, my child, will have a delay of three seconds and. 75 00:07:06,670 --> 00:07:07,690 Wanted to be large. 76 00:07:11,030 --> 00:07:12,440 Then the fourth child. 77 00:07:14,960 --> 00:07:19,220 You should have a delay of six seconds and you should be. 78 00:07:20,820 --> 00:07:22,560 Forty and 35. 79 00:07:24,770 --> 00:07:28,250 Then, hey, fifth child. 80 00:07:30,090 --> 00:07:30,810 Wait a second. 81 00:07:30,840 --> 00:07:37,580 The fourth child, you should be 30 and 35, 40, why do I keep jumping down there? 82 00:07:38,010 --> 00:07:50,280 So for the 45 and the fifth child, the fifth child should have a delay of eight seconds and the domination 83 00:07:50,280 --> 00:07:52,620 of 50 and 55. 84 00:07:54,590 --> 00:07:55,910 Then the six child. 85 00:07:58,180 --> 00:08:02,890 Should have a delay of less than two seconds and. 86 00:08:03,760 --> 00:08:09,670 40 and 45 again, and the seven child should have a delay of. 87 00:08:10,760 --> 00:08:15,740 Five seconds, and it should be 50 and 55. 88 00:08:18,020 --> 00:08:19,940 OK, so let's see how this looks. 89 00:08:21,010 --> 00:08:21,740 Hey. 90 00:08:23,230 --> 00:08:30,190 It's bubbling, OK, guys, so I hope you enjoy this project object, so you enjoy this project. 91 00:08:30,430 --> 00:08:31,570 I think it's an awesome one. 92 00:08:32,050 --> 00:08:35,390 Just to get a bit of grip on the animations positioning. 93 00:08:36,190 --> 00:08:38,480 Yeah, it's it's pretty cool, isn't it. 94 00:08:38,770 --> 00:08:39,580 So soon. 95 00:08:39,580 --> 00:08:40,050 The next one. 96 00:08:40,480 --> 00:08:40,900 Take it. 97 00:08:40,950 --> 00:08:41,320 Bye by.