Web animations using HTML/CSS and JS ( Greensock ) | Yashin Soraballee | Skillshare

Web animations using HTML/CSS and JS ( Greensock )

Yashin Soraballee, Developer / Trainer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (1h 8m)
    • 1. Introduction to the course

      1:41
    • 2. Exporting images from Photoshop

      3:35
    • 3. Creating and linking the necessary project files

      4:06
    • 4. Building the first screen - part A

      7:00
    • 5. Building the first screen - part B

      9:12
    • 6. Adding the logo

      1:58
    • 7. Adding the photos

      10:58
    • 8. Finishing the last screen

      7:51
    • 9. Animating the banner - part A

      10:52
    • 10. Animating the banner - part B

      4:58
    • 11. Animating the banner - part C

      4:04
    • 12. Looping the banner

      2:03

About This Class

638c3f79

This tutorial is mini project based where we will produce an HTML5 animated banner. Using a PSD file as asset, I will guide you through all the steps to exactly reproduce the banner in HTML before animating it. This tutorial will cover the following sessions :

- Export images from PSD,

- Organise folder by creating and linking HTML, JS, CSS files,

- Create HTML file,

- Style HTML elements by taking measurements from PSD,

- Animate the HTML elements using Greensock Javascript Library.

We will start by exporting the contents from the PSD, writing the HTML codes, adding CSS styles and finally use the Greensock Tweenmax library to animate the banner.

This course is for students who already have some basic knowledge about HTML, and wish to progress further by doing some more advanced styling and produce animations. If you don't have any HTML knowledge, you can still take the course and you will understand what it is all about. It will also help students reproduce an HTML document from a any PSD.

Transcripts

1. Introduction to the course: Hi, My name is Yashin's or a body. I have been training and leading production teams for many years in one of the biggest digital group worldwide. I am also a very passionate going toe, and I have released several websites, applications and games. This tutorial will be a mini based project with the experience that I have in this failed, I will guide you through all the necessary steps needed to create an animated banner through goading with the help of a BSD fire. In just about one hour, you will help necessary skills to start coding animations for the Web. Isn't it exciting? I will first teach you how to make use on footy shop to export images that will be needed for the animation. We will then create only necessary funds and link them together. We will then start goading, adding elements into the animation, one standing it at the same time. We will do all this one carefully, taking measurements from the PSD so that the H D. M. O looks exactly the same as the Photoshopped Preview er. Finally, we will animate the banner using Drain Max, which is a free JavaScript library from grain sock. I have designed this ghost from students who have some basic HTML knowledge and want to learn how to produce animations easily and quickly. I invite you to enroll on this ghost, and I wish you on the best. 2. Exporting images from Photoshop: lettuces. Don't by organizing the road folder off the banner. We already have the phone. We've owned the Web. Phones, lettuce, create folders for the other files, starting with the CSS and another one for the majors. Lastly, create one folder, which were gunned in the JavaScript file. We can now start exporting all the images one by one from the PSD file. Let us start with the logo, which is inside it. It's light one folder, right click on the logo layer and select Quick Export. Aspey, NJ. Save the image as logo that BNG insanity images folder. Now let us move on to export it to contact off. Slight. Do well one. Click on the layer for the one and select export contents. We will export at this fine as a Jeep Bank format. Let us verify whether the images have been correctly expanded as you can not. This logo is in PNG, and the photo one is in Deepak Format Photo. One also has a tick correct dimension. Let this continue by exporting their remaining images. We'll repeat the same process for the layer for the dough. Inside the phoned, a slight free on a turn for layer foot if we're inside that folder slide for finally went into export as a fighter, which is in the last slide. As you can notice, the fighter does not take the full area off the banner. The photo is also not a smart object as the previous ones. When we run, click on it. We don't have the option. Exposed content, however we can still export, is a strip back. By selecting export us, we now have a dialogue box with many settings that can be adjusted, select the images founder and export the photo as 44 That G bank. We have now almost exported all the fighters except for the right background in the slide. One us. You can notice that the right background is in your different accounts. It is a such so that we can individually animate them. We can now process by exporting the dump aren't as dumb shape. Don't be NJ and the bottom part us bottom shape. Don't be NJ. Notice that we are exporting them as BMJ because we need them to be transparent. We have now exploited on the images that are needed, and we can now process it with the coding off the banner 3. Creating and linking the necessary project files: Now that we have all our fighters, lettuces, start creating our files. I will be using a Frito Gold sublime tax to create and edit on the fines. Let us start creating the HTM own document. Locate the road funder where we are walking and seem to find us. Index dot html Stumbling text has many shortcuts that we can use to go faster, dive HTML and pressed up on your key boat you and get on the basic tax for the HTML document. Now let us create the ultra fans that we will need in this project. Create a new file and renamed it US. It's times Don't CSS save the file now create under the new fine for the JavaScript. Save it asked main dot gs inside the Scripts folder. These are the free funds that we will need. Let us get back to the index dot html file. First, let us give the document a title. Next, we need to define the type off. Encoding that document when years type Mehta and pressed up on your keyboard toe automatically said it doe utf eight. Next, we need to insert an intimate attack for the viewpoint dive content is going to went is going to device wins. You also need to set the initially scale to one next win into lengthy HTML file with the CSS file type link and press stop on your keyboard to utter complete. Then link tag now inserted the bath for the stands. Don CSS fire, which is located inside it is yes s folder. Next, we need to lengthy html file with the JavaScript file Diaby script and breast up for the completion. Divert the buffed for the remainder gs file. We now need to include the both for the JavaScript library that we will use to make our animations. If you don't have the bath for the city and file, you can Google search for it. Let us open these links and try to find if we can get it from here on this page you have on the links for individual competence off the library. This is very useful. If you need to create a banner with a weight restriction, you can only include the funds attack two you will need in the banner. You also healthy links to the full library at the bottom off the page, the buffed for the dream. Mac's library is what we will use to create our banner. You can also get the bump for the dream Max file directly in the green sock website. Let us take it from here. Copy the bath for the dream Max file and best it into your HTML document. We have now linked on the necessary funds in the index dot html. Fine, we can Therefore, we start coding. I want banner. 4. Building the first screen - part A: lettuces start by adding a date which will go hunting all the elements off the banker at the close to in so that we can apply some CSS before continuing any further lettuce. Take a look at the PST file and decide how we will organize our layers in our HTML document us. You can see on slide one on the right bank. Wrong takes it a whole area off the banner. If you look at slighter thought off, it is added up and the other boat aren't about him. The big sales tax is also on the top part off the banner for the 1st 6 crane. We should therefore create two days with the big sales text into first Dave. But when we will work on the animations off the next screens, we will move the damn player with the right bank round town city dump and the bottom layer with the right bank round talents to the bottom so that we create an empty space which will show the photos on the upcoming screens. Let us now get back to the HTML find to create our do. Dave's created first Dave and give it to the idea named top section know that we were give an idea name to all the Dave's that we plan to animate. A diff with an idea name can be uniquely identified where us a close can be assigned to several days. That's the reason why we will don't get ideas. One animating the Dave's next letters create under the Dave, which will contain the filters between the right background. Intel remaining screens off the banner. We can give it the idea. Name. Medial section. Finally, we need to create honest Dave 40 Bottom section. Give the good habit of probably aligning your code. Now let us open the stance down CSS fine and start adding some stars to the existing tanks we have placed in the HTML document. Let us start with the container class. It has a width of 300 big cells and height off 600 big sounds. We also need to set its overflow us hidden. This will hide on the moving items which are outside the banner area. Lettuce answer at 18 border of one big sound. Do this container finally set its position to related next lettuce create under this time for the idea named dump section. The witch is 300 pixel, just lengthy containing winds for the heart. We can either check it from the PST or the image properties off top shape dot BNG right. Click on it and slack. Get in for If you're using Mac, you will now have the dimension off the image, which is 300 by 446 pig cells. Let us get back to the standard CSS farm and inset at the height as 446 big cells. We must now set it in Bagram. Image off this I di dio dump ship. Don't be NJ make you that you are probably down getting the images folder Next, we need to set its postion attribute as absolute all days that will be animated Will half its position attribute as absolute If your Dave is not moving while walking on the animations, this is the first attribute that you need to check. Let us now open the index dot html five To see how it looks in the browser, you need to constantly look at the preview in order to easily spot any mistakes. The top shape don't BNG image fund is property shown. However, you can notice that our border that we set on the container is not appearing. This is because of the style. Container should be targeted as a close instead, off I d. You can now see the border while refreshing your browser. Lettuce proceeded by adding the stands for the other ideas that we have already defined in the HTML file. We can process with this time for the bottom section by copy and pasting it good for the dumps, action and modifying it. The image name is bottom shape. Don't BNG. We must now take and look at the image properties. To get the proper dimension off the image we need to modify its height to 216 big cells. We now need to take a look at the preview to say whether the image fund is properly showing up us. You can see it is not. The reason is simply because it is overlapping with the dome shaped at BNG image file. We therefore need to add it down property into the Dave. In order to move it downwards. You can easily get its value from the PST file with the image selected drug. A ruler did it up off the image. The Y position off the ruler is shown and is the value that we will need. Let us get back to the stance. Don't see us as fire and inside it value US 384 big cells. We can now verify it on our browser. As you can see, the bottom section is now properly placed. You can use Chrome Inspector to analyze that document with its styles. Let us hard. It'd obsession. By adding a discipline known attribute in its style, we can now see the bottom shape more properly. 5. Building the first screen - part B: let us now continue to add the other elements off the first screen. In order to do so, let us refer back through the PST. We have the text title and the longer as the other elements on the screen let it started. By adding a gardena for the title, we can label it as title container. We must now insert the big and Saints tax and assign different glasses to them. We can use it a SPAN TAC 40 text and, of course, put in the new line will be own tank. Let us get back to the stars. Don't CSS file and defining the do classes that we have just added in order to set their attributes. But first we need to define the Web fort at that we will use in this document. Lettuce add them. Added up. You can define any Web fort by using the at phone face tank use. I need to define its a phone family attribute. Let us take a look at the fourth names off the force that we will have two years. As you can see, we have future and ditty masters. Let us start with ditty masters. We now need to indicate at a location off the Web phone file. Using the source attribute, we need to specify the location off the W offto format as well. Ask the devil you o F F format for increased compatibility. We must now said it's a fort wait to normal as well as the fourth. This time. Doing normal lettuce include the future went forth as well. We can just go be based at the goat for the deity masters were foot and modify it for future. We need to change the phone family and give it a name which corresponds. It is the one phone. Next, we can copy it if I name off the front and best it in duties. Source attribute. Wish it off course specified both for months, as done previously before adding the attributes for the big dext and the sense tanks like this better organized, they stands with a parent and child relationship. We can set these classes as a child off the i d dub section. We can now start adding the attributes. Let us start with the food size. You can off course, check the phone size from the PST directly as you can see on the properties panel. It is 146 big cells. Next, lettuce sent a tick collar, which is white. The axe, a decimal code for white, is of course, F f f. Let us now do a preview on our browser. As you can see, this time is correctly being applied to the text. We should now specify the Ford family. The phone family would should be used Is ditty monsters as defined above? When you now do a preview, you can see that the phone has been correctly applied. Let us now copy and based the gold for the sales text. Taking a quick look at the PST. Wish it, of course, change into Ghana and the fourth size their phone sizes. 77 big cells this time is correctly being applied, and we should now change the cholera. We can big the Hexi decimal value of the Connor and based it in our gonna attribute. Let us do a preview again. As you can see, the color has been correctly applied. We must now reduce as a line, height us into PTSD on the line hard attribute and said its value to 10 you can just this value. If it is not correct, it now looks better. We should now start walking on the rotation. We can rotate the Dave Diner Gone, Dana as a whole. We must start by setting its position. Attribute as absolute to make any transformation via CSS, we must always indicate the M s transform for Microsoft. The Web get transformed as well as the transform tack to make it compatible with most Brahms's. The current transformation is a rotation which can be indicated in decrease. It should be negative, since it is in an anti clockwise direction. Let us put minus time for the time being, and then we can check it through the PSD for the correct value. We must now include the Web get transform as well as the transform tank lettuce now verified the value off the rotation from the PSD. You can get it through the info panel. As you can see, it is minus 12. Bone seven degrees sent its value in the CSS file. Of course, you could have set it earlier as well. Let us now check our preview. Er, there is not a big difference. As you can see We must now set a dick Correct position for our title container. Start by adding the left margin, we can check the value from the PST by using a ruler. As you can see, it is approximately 30 big cells. We now need to put a sit down Margin looking on the PST again. It is on 166 big cells. Let us now verify our browser preview. It is looking great. We can cross check it with the PSD. What is left to be added. Is it in burger at the bottom? 6. Adding the logo: let us get back to the HTML document to add a Dave 40 logo. We should at a dealer, go outside the bottom section because it will not move and will stay at the same bastion, Burma. Netley added. The image tack and give it the buff off the logo image file. It should be images slash logo. Don't PNG. If we look at the Browns a preview, you can see that it is not appearing. This is because we have not yet added they starts for the logo. Dave. Let us start by adding the wit off Dave, we should be 300 big cells, and the position should be absolute to make it at the top. We must also edited text along property so that it is properly scented. Finally, we must include a margin bottom. Let us get its value from the PSD. We must perform a small calculation here, 600 minus 583 gives as 17 big cells. Therefore, we need to set the value for the bottom attribute as 17 big cells let us check the Brahms it again for a preview. As you can see, the logo is appearing nicely we can off course compare it with the PST and seeing whether it is identical. We have now completed the first screen off this banner. In the next session, we will continue walking on the other screens. 7. Adding the photos: Now that we have completed the first screen off the banner lettuce continue by adding the elements for the other screens. As usual, we should look at the PSD to have an idea how we are going to proceed. Let s take a look at the slider. As you can see, it is divided into £3. The dump section will contain the title taxed the median section. We're counting on the floaters and the bottom section will only grunting the lager. Let us get back to coding. Since then, we will walk on the animations in the last recession. Off this tutorial we need to hide the dump section said that we can see the photos on the middle section Let us go to the CSS file and put a display non on the top section. We will off ghost need to remove this coat later on one. You now do a preview on your browser. The top section should be hidden. We can prostate by inserting the photos in our HTML document. If you take a look at the PST, you can see that we should add photos for four screens. The photos are also displayed on different positions, which means that we should add a style on each one off them. Let this process by adding Dave's for each photo, give it a unique idea name and finally, instead at the image that with the bump off the photos, you can copy and paste this line of go to four times and change at the ideas as well us above 44 images. We should now start by adding this time for the middle section and 80 for four years. The media section should, of course, have the attribute position as absolute. It should also have it up margin. Let us take a look at the PSD. Two. Can't devalue the value off this merging is the wine location where the further starts there is already a guide in the PST, which gives us at this location it is 100 big cells from the top. Next, we should assign the CSS for all the fighters which our Children off the middle section. Dave, we can therefore organize our CSS coat. As such, we can remove the dump attribute and European based at it good for the other four fighters . Let us do a preview and check whether our images are appearing. As you can see on the developer console, the images are not being loaded. This is becomes at the buff off. Those three images are not correct. The problem is with the fund extension, let us go back them in the index dot html document. We now do not have any mistakes. It is it's a four footer which is being displayed because it is the last in our list. Let us play with the capacity attribute to make the first photo visible and hide all the others. If you now refresh your browser, the first footer is visible. Let us now take a look at the PST and decide on what intimate we will walk next. We have already completed its screen 1 to 4 we now need to complete at the last screen lettuce Walk on the visit is Stow Button. Since the content off, the last screen will be outside at the Media section area and also on the dump off the media section area. We need to create a new Dave. Ask the last screen. Let us also create a new day for the city and Bolton and assign it a close I visited store text is now only divisible on the preview. We don't need to understand the stance to answer that it looks exactly us in the PSD. Let's get back to the CSS farm. And at this time for the last six Crane, the wit should ofcourse be 300 pig cells. Now they discovered they start for the city. About in it is going to have a wit and heart, which we will take from the PSD. You can measure the area off the button using the market. It'll it has a winds of 178 and height off 58 big cells lettuce. Insert those values in our CSS. We should also at the background color to it, which we can take from FreeBSD. We can use the I drop it all to picket the corner and select its Hexi decimal value. Let us now do. Under the preview, we can see that Ghana has been correctly applied as well as the dimension off the button. We now need to work on the position and front family before proceeding. Let us make it effective on the losses crane visible since we are working on the last screen. We can do it by setting the opacity of the first screens as zero and setting the opacity for the last screen as one lettuce. Also hard at the bottom section so that we can work on the Lasses crane easily. We now to have the correct fighter with the bottom section hidden Let us now at a different family attribute the phone family used is Futura bold as defined in the 1/4 above. The next attribute that we should inset is the fourth size and of course, we can take its value from the PSD. It is 20 picks elves. We should also center aligned to text using the text online. Attribute. Let us do a preview. As you can see, the fourth has been correctly applied. We should now vertically center it inside at the mountain. We can add a budding dope inside at a city in class. As you can notice, it is increasing the height off the button, which is not correct. We can fix this issue by adding the box sizing. A tribute to this class we should set is a Web get box sizing as border box and most box sizing US border box as well. In our preview, we can now see that the height of the button has been reduced. We still need your correctly center it virtually, and we can try to get the correct value by moving the next. Using the chrome inspected your the correct value in 16 big sounds. The bottom now looks great. We should now said, it's gonna position in this screen. Let's get back to the PST to get the values of the margins, we can use the market. You're to find that they left emerging the left. Imagine value is around 60 pig cells, and it don't value is 272 big sounds. Let us now do a preview on our browser. It has not dating the correct position. It is only because we have not said its position attribute to absolute lettuce and it and do the preview again. Now we can say that the button has taken in the correct position. We can now proceed by adding the other items on this last screen 8. Finishing the last screen: let us now is start walking on the last screen off our banner. If we take a look at the PSD, we can see that we have to include the text up to 70% off. Let us open the HTML fine and at Dave's for the up to text, the 70% text and finally the off text. We should also place the text in between the span tax and added close to them. Let us make a generic close, which we can apply to all the texts and make them and select table. Let us go and the class text. We need to set up the user. Select the property as known to set any text us and selectable. We should ofcourse assign ity web. Get most Ann Emma's version off the attribute to make it compatible through old process. Finally, we should also start it ago. Za property to be default. Now let us go to the index, not html fine and assign. And it's close to all the text which are included in between despond tax. The tax are now and select table until preview lettuce continue by adding the free classes off the tax that we have added in the HTML document taking a look at the PST. We can get it the fourth size, which is 25 big sounds and the phone family is ditty monsters. The Ghana is black, which can off course be represented by free zeros as hex a dismal value. The 40 style is now okay on our preview, we should now walk on its position Let us displace and to contain a diff with the i d up to text set its position to absolute and for the top marching Let his jacket the value from the BSD. It is 72 a pig cells send it in with off this container, Dave do 100% and a sense the text align property to center to make detect centered on the banner. If we now make a preview, we can see it at the text up to is already on the correct position on the screen. Let us repeat the process for the off text We can off course copying based and they stand for up to text and change the values off the attributes. The tough margin is 214 big cells. I will preview now looks good. We should only change. Insist on 40 70% text. Let us start by changing the position of It's gone. Dana looking at the PST again, the tough margin is around 100 big sounds. Note that a terrorist a rotation on the text, which we should add on the CSS. Let us now, at the style of 40% class, the phone size is 110 big cells. The phone family is city monsters off course. And for the Ghana, we can take the hex, that decimal value from the PSD. Now, for the rotation, we can copy the attributes from the tighter container I d To keep things stand out. Let us now do a preview. The rotation has not been applied because we should have added the properties on the container idea. Instead, as you can notice on the preview the entire spacing between the text or not, even we can get a correct value using the chrome. Develop it. Let us try and change it. It don't value off the 70% text. 90 big cells is okay. Know that on the PST the rotation is not the same amount us in the preview we have now completed to the last the screen Before starting to work on the animations, let us make the first screen visible. We should remove the display non on the bottom section. Remove it as well on the dump section Saturday. Opacity to zero for the middle section. And, of course, how did the last screen by setting its opacity. Zero. Now we have our first screen fully visible. We are now ready to walk on the animations. 9. Animating the banner - part A: Now that we have included all the contents in the banner lettuces start walking on the animations. We will right all our scripts in the main dot GS file, which is going to in the header off the HTML document. We will right all our goods inside a window that unload function. This will prove it. Any errors in the guest that the JavaScript goats are executed before the HTML document is loaded, we will use a feature in the green sock library called Tom and Max to perform all our animations. The timeline allows us to stock our animations and play them sequin Shelly. One great advantage while using the timeline is that if we need to modify their duration off our first animation, it will not have an impact on the remaining animations. Let us start by animating the big sales tax and at a stamp effect to it. Therefore, when the animation starts, the big sales tax should be much larger Before it gets back to its original dimension. We need to modify its CSS property and increase its weight and height. Invite the same scale factor. Let us make it twice its original dimension. Let us try a privy er. We should also said its opacity, so that, it appears, were fading effect. The text is now invisible on our browser. Let us now create our first animation, the syntax to be used while using the timeline. Jones is quite easy. First, we need to call the variable that we have set us the timeline. We must then both several barometers. The first barometer is the enemy to be animated. It can be a Dave or a glass. The second bomb, Amita is the duration off the animation with any do pass an object in the set barometer. This object decks in the type off, easing to be applied on the animation, and it also takes in on the new properties off the element. Finally, we can add another optional para meter, which is Dina, and it indicates the amount of time before the animation starts. Let us now go to our first animation in our main dot gs fire. We start by making references to the name of the valuable we have just defined above. Next issued diaper don't do and start bossing owns the barometers at that Oh needed. The first barometer is Afghans earthy element to be animated, and in our case, it is too tight. And container, let us put 0.2 for the duration of the animation. Next, we should bounced an object defined by curly brackets with the type of transition. And if the new properties off the in, imminent for the type of transition defined by the ease off course, you don't need to remember off the top of transitions. You can get them from the green sunk website on the easing section. Here you have a green sock is visualize er that you can use, You see, like the dive off animation that you want to use in your one page. You can change the type off easing, and you will see how the animation differs. You can also click and change at the values off the generated goat US indicated here. Now that we have selected the type of transition that we won't, we can copy and paste it in, um, a code. We now need to set the opacity back to one as one us. It is scaling factor. Let us now refresh our browser. As you can see, we are getting an error in the council It is due to the fact that we have not put brackets up dirty function latest Right again, our animation displays nicely If you look at the sales tax carefully one it is being animated. You can see that it is boldly being trumped. It is because it's parent continua Onley stops here. Do some XYZ. We can displace the initial position off the title. A bit more talent at the top. Let us change it In this year S s file, the dump position is 166 big cells. Let us change it into 100 big cells. Now on our Js file, we need to change it back to 166 big cells. Note that we should not die Be ex us in this year s s Let us now just our animation again. There is still a very little bit of cropping. Let us change and the initial value to be 50 big cells now it looks much better. Let us now move on, wave our next animation. But before lettuce rename the timeline variable into a most simpler one because we need to write it several times. Let us just put d l four timeline. The next animation that we should do is to move this stuff. Part of the banner that wants it it up. Let us check the H demo to see how we named the I D. Off the stump about it is dump section. We can just copy and paste it in our Js file. Let us do the animation for adulation off 0.5 seconds. And for the easing, let us do a fade out, which is indicated by the power one that is out property. We need to set it it done property since we are displacing it and it should be negative since it is moving downwards at the top, let us try minus 250. Where was I need to check the value from the PSD. As you can see on the promise of preview, the top section is correctly being displaced that once at the top, let us now check. It's gonna value from the PSD. We should get the value from the second screen. The correct way to get this value is to measure where the image starts outside the stage area. It is minus 264 big sounds lettuce do under the preview, but there is not going to be much change. The set animation that we should now do is to decrease the size off the title text lettuce . Don't get the title container idea again. We can live the duration off the animation to be 0.5. And for the easing, we can put a simple fit out indicated by department one that is out. And for the scale lettuce reduce it by two, which should be a 0.5 that don't value should be the top. Imagine, inside the top section idea, let us put it US 200 we can later adjust it. Now let us start this animation exactly at the same time as the previous one to do so, we can indicate a negative barometer for the delay, and this value should be exactly as the previous animation duration. Therefore, the value should be negative. Zero bone five and we should started us. Negative is equal to 0.5. Let us now do a preview. The tough margin is not correct. Let us try 220 or we can also use the chrome develop itto to get the correct value. It now looks good. We now need to animate it about him section and make it move downwards as well. Let this copy and paste in the previous line off goat and change in values. Let us take a look at the PSD to get the mounting from the top of the document. It is 475 big cells. Let us now do a preview. As you can see, the scaling factor is not correct. There shouldn't be any scaling factor on this animation so we can remove it from the coat. The animation now looks good and we have just completed the animation from the first screen off our banker. 10. Animating the banner - part B: now that we have completed the first screen, let us continue by walking on the fighters and animates them. The animals that we will don't get is for 21 for the type of transition we don't want any is in own is out effect wishes. Therefore said it as linear dot is known. Next, we need to displace the photo down What is left. If you remember, the wit of the freighter was 600 vixens, therefore halfway down. Once that he left should be minus 300 pig cells. And for the delay, we can once more start at the animation at the same time as the previous one. It's your cellphone B minus 0.5. Remember that we previously set the opacity off the diff middle section 20 We should therefore set it to one in the stands down CSS file before we can preview end. We are correctly getting 44 in the preview. We should therefore set the opacity off with your phone to zero and center capacity off with a 1 to 1. We can now see the transition that we have just placed in photo one. However we have under the small problem. The day of middle section should be below the dump section, but correctly it is above the top section. We can easily song this by giving the top section. Is that index value? Let us put it us time to make it above all the other elements in this document that the middle section is now correctly being displayed behind the dump section. Dave. At the end of the animation, we should set its capacity value to zero. Let us right at a corresponding goed. We can just copy and paste the previous line of code put the opacity as zero and the duration off the animation US 0.4. We can also change as the delay and set it do the same amount off situation off the animation. The photo one now fades aren't until end on the animation. Let us now walk on the 32 first off only should make a transition to make it visible. We can complaint based on the previous line of code for the photo, one which make it disappear and apply it to defer to to to make it visible, instead setting the opacity into one. Let us now make a preview defector to is correctly appearing just after the animation complaints for the photo one. Let us now make it transition downwards at the right for the for 22 we can off course copy and paste the code for the transition off. Better one and change values. If we are planning to move it downwards at the right, it is the final position off left. That should be a zero. And the initial position on this dance that CSS should be minus 300. This value should now be zero. Let us now test our animation. We found her to change the fighter one into a creditor. It is now being correctly animated. Let us, Prasit. By animating they said fritter copy and paste at the previous set of coats and change a defective do into 40 free. Let us now make a transition town. Was it left? It should therefore be minus 300. We have now completed the animation for the first free fighters. Let us now make the last fighter visible. We now only have the last screen to animate 11. Animating the banner - part C: first off, all we need to make the tough section disappears downwards the top. Let us copy the code for the previous animation that we set to it. We can now change that. It don't value do something that will be outside of this stage. As you can see, the animation is immediately being launched. This is because at the incorrect value 40 d day, we should rather remove it. And it will be just after the previous animation. It is now. Okay, The next thing that we should do is to make the last screen container visible. Let us don't get the idea lost screen. It had an opacity off zero. So we now need to set it to one. Let us also make it appear with the Fed in effect and forms a did A if we want to make it appear under the same time off the previous animation issued off course B minus equal to 0.3. Let us now preview our animation. As you can say the last the screen is correctly appearing. We should now animate the individual items off this last this crane let us start by making the up to text visible with offending effect. We should, of course, go to the stars and change its initial capacity value to zero. Next, let us make the person text until off text appear one by one we can copy and based on the previous line of goat and change the Dunga Dave to present, taxed and off. Next, we should now modify the opacity value in the CSS Fine to be zero by default. If we now review the animation, you can see that the appear one after the other. Let us improve the animation on the 70% text and it put a stamp effect on it. Just us on the first screen. We should therefore set its original Skane to to we can now reduce it back to one on our GS fire. Let us now make under the preview. Our animation is now looking right. 12. Looping the banner: one last thing that we can do on this animation is to make it look timeline. Max gives us a lot off possibilities to control our animations, and we can easily do it by adding a repeat donna meter. We can now set its amount of lobes that we wish our animation do. Buffalo. Let us put it as free. We can now safe and doing preview. As you can notice as soon as that the animation complaints. It is starting over again immediately. It does not give the user the time to read its last screen. We should therefore start. It's a lobe after 18. A. Fortunately, using the term landmarks, we can do that easily as one by posting under the perimeter. The perimeter is repeat today and it takes at the amount of seconds. It should wait before starting the next loop. Let us put it us free. We can now do a final preview. Our second look now starts three seconds after the first loop. This is the end of this Trudeau Toral. I hope you enjoy it and thank you for your patience. If you have any questions, don't hesitate to message me