 Just checking the mic So hello everybody die youth everyone Die youth everyone. I don't know if the pronunciation is correct or not. I'm just trying the Egypt Thanks a lot. So Welcome to y'all and we are here to talk about animation and animating your site So let's get started So my name is Nikhil Sukul. I am actually working in Fai Chi as a senior Drupal architect And I have with me with it Hello, everyone. My name is with it an area working as a front-end developer in Fai Chi solutions so guys It is 1700 hours. You might have exhausted by the overall from today The entire sessions what you might have attended. This is time to get entertained So animating your site or animation anything is pure about entertainment. So you will actually give you a fun Walkthrough of how animation goes off and how we can do animation on the site and everything So what kind of topics we will cover? We'll actually cover. What is animation? How it all started? Why animation is required? There are approximately 12 principle for animation. We'll talk about those When where and how to use animation? Responsive animation Mobile phone should have animation. So let's talk about that Performance, yeah, it's a big topic for animation how we can increase that and yes a follow-up by a demo So let's get started over to you with it Thank You Nikhil So what is animation? So let's take you to the Latin world from where this word animation comes to an existence Animation means anima means soul in Latin. So what is animation? adding life to an object and Making breathe move and get settled down at its position is an animation so animation is completely Based on the frames number of frames being used to create animation is very important to get the very smooth effect To to create an animation is very essential. So in the example Image you would be able to see that very well that human eye can capture 60 frames per second Very clearly and can judge the motion and transition of image very clearly Here in the image you would be able to see the man is getting jumped down and getting transformed into an animal It's a kind of animation and I will try to explain the animation in this way, but does it mean Animation is illusion So let's say animation versus illusion. I'll explain you what is illusion? So an illusion is a showing of all things true correct and creating a belief that Whatever we are showing is correct. So here I've tried to explain the Illusion effect in two example on the left-hand side of the image you would be able to see a never-ending triangle Why never ending because there is no starting point and there is no ending point of it and a field to feel the illusive effect On the second image you might have to go back and come forth to feel the illusive effect But I think it's hypnotizing one. So don't get a constant don't concentrate it more than five second You might get hypnotized So moving to the next slide where Nikhil will explain how the animation and history about the animation Thanks with it. So let's talk about history about Okay, so I was born in the year 1976 Sorry guys, it's not about me. It's about the animation. Let's talk about animation here So animation actually started off 5,000 years ago in Iranian pottery. There is a glimpse and traces of animation. How I know all this Wikipedia quite very obvious but But here we are talking about animation with respect to web So let's talk about web animation. So web animation is all started in the year 1987 with the Invention of GIF. So everybody knows about animated GIF, right? If GIF was not invented Animated GIF might not have invented Quite obvious. So GIF invented and the after GIF in getting invented The first thing we able to see was people were actually doing experiment of creating animated GIFs Animated GIF was an era where in the website we would actually see a magical effect We haven't seen before there were GIFs coming and have their animation on the fly Lots of people were using it for ads and various kinds of other things And I was in that era definitely so I saw those GIFs coming on the pages Sometime irritating but sometime it's good and it went for a while People were using animated GIFs for a very long time. I mean with respect to that era Till the time when something known as in late 90s flash got invented Now Adobe did a very good job by actually creating something which we can work on and we can create Awesome sites using flash. The good thing was it was actually based on programming So we can actually do use action scripts. Wow for programmers We can do programming and we can do a lot of animations one Second sound that is audio plus video. We can actually collaborate both and do something on a website Awesome technology. We can do a lot of tutorials. We can do interactive videos. We can do a lot of things in flash Yes, it was good But based on those kind of speeds at that time it took a hell lot of time to load a flash site I mean I can take a coffee break and come back and then the flash site will get loaded So yeah, so that was the error but flash site once get loaded. It was it was awesome I mean we used to go through anybody who knows about Jim Carrey site of flash Anybody here? Now Jim Carrey has a flash site around three to four years back It used to take around I think five minutes for me to load but But after that once get loaded you get an entire tour of Jim Carrey's entire journey. He's any way freaky guy So you can actually go and check out all these madness there But yeah, so it was actually done in flash now flash has a lot of performance issues Flash has a problem with closed source because of the adopt flash had a problem with respect to SEO because the search engine What he will recognize so many things going on and in the middle of that Sometime later something known as CSS 3 property came in the picture CSS was already there That's why I'm saying CSS 3 not CSS So CSS 3 was having some of the new properties or animation like transition Transform and above all any mission. So there was a property. There's a property in CSS known as animation using that property Without any external plugging like flash you can actually do animation on a browser and browser were embracing it They were actually using it that CSS 3 and still using it to get your animation on the fly Then this after CSS 3 something known as web GL came. Oh Man, this was an awesome technology. I have to use web gel before I have seen the 3d effect what it gives I saw it in chrome experiments. I think the first time when I saw web gel I was totally blown away with the kind of thing what it can do Web gel was very important because web gel actually having a technology known as canvas Now remember the canvas is a technology with respect to CSS 3 and HTML 5 which we are still using and we are continue to use for animation Now web gel has a canvas one as 3d canvas. You can actually do a 3d thing Web is still used in few places where you have gaming on the fly But yeah, it's more of in the gaming perspective. That is still important and now we are using HTML 5 So HTML 5 CSS 3 Little bit of JavaScript you can achieve animations or some animations on your website and Those animations are interactive those animations are good and as for the future of animation goes I think these two are doing an awesome job so That is the history not mine of animation Over to you with it. So let's move to the next slide Why animation? Rather say how animation can be useful to increase the usability So when the gif invented in 1987 and it started getting used in website by 1993 when HTML invented and released first release was in 1993 No one would have ever thought that Animation can be useful to increase the website usability second one to guide the user Nowadays most of the sites you might have seen that keeping the Continuously moving like a icon like click here to scroll down or click here why such icons implemented reason is just to give the interface to the user to interact with and Create the belief in the user mind that when user is interacting with the interface something is getting done And they are getting the desired result second one for branding What kind of sites impresses you more? I think there are two types of things which impresses you more on the website One is the content it provides and the second one the kind of persona or the UX Any UX UI any design Kind of thing impresses you more and it while implementing an animation on the website It will definitely help to create a brand name of your website and will force the user to come on your website again and again So next one is help to help user to visualize when user visualize about any relative content and Whenever user think that such kind of content will be provided on such site Will definitely help the user to visualize your site and it will create a brand and it will increase the usability of the website So how can we apply the animation on the website? So before moving to the How we can apply let's see what are the basic principles required to implement those Implement the next animation So next one 12 basic principle of animation first on your seat belt. We are moving ahead The first one Squash and stretch On the left hand side of the image you would be able to see consider the element is soft and Falling down on the surface. So when it touches the ground and falling down. It's getting squashed Stretch and moving forward. So same principle. I've tried to explain using a gif image So poor Tom getting banged by Jerry and always get boys on his head, right? So I will show you the piece of code which I will implement to just to create this principle So here I have used the same prince same example on the right hand side I have put a piece of code where you would be able to see the animation property of CSS Animation property CSS contains four parameters one animation name animation time animation duration and the effect and The iteration count also we can implement and pass as a parameter into this property and Animation name will be divided into number of pieces and number a number of key frames So we can say when element is appearing its Transiting means it's converting from opacity zero to one So you would be able to see that from starting initially it's for 15 percent time It's opposite is zero and from 15 to 25. It's appearing. So opposites are converting to one and after that 35 to 45 percentage when element is falling down translate transform properties used where for Element is moving down side. So at that time we are using a translate wise because the element is moving in the y axis So and after that you would be able to see I will use the transform property with the translate x parameter So translate x y because it's moving in the x axis x direction So and at the end it's it's getting hide. So its opacity turns to zero the next one Anticipation So what is anticipation any action happens and before before happening any actions if anything is predicted It's considered as anticipation action So let's say in the as an example in let's a baseball game When baller is about to ball at that time baller raises legs move backwards and throw the ball So while in this Example when baller is raising his legs and moving backward this can be this scenario is considered as anticipation action So under ref on the right hand side you would be able to see the when the person is trying to bang the hammer hard on the surface it's picking up the hammer taking it up back and Banging banging banging on the ground very hard. So picking hammer and go taking it backside. It's considered as any anticipation action So next one is the staging principle on the website you want Sometime you want the user to focus on particular thing So let's say when there are plenty of elements moving on the website And if you want the user to support the specific element then it would be difficult for user to spot it But when every elements are static and only one element is moving It would be pretty easy for the user to spot the spot the element So staging principle Exam best example is a loader icon and the second one is most popular is a model pop-up window We reach which we use on the website just to grab the user's attention So while applying the model pop-up what we do we add a Back back layer means we are adding a layer behind the pop-up So we refrain the user to visit or see any elements of the website And we force the user to focus on the pop-up. So next one is a straight ahead action and pose to pose Here we are going to talk about two actions simultaneously Straight ahead actions is the animation which is created well framed Well pose to pose action is like we are filling the gap between two frames So on the right-hand side of the image when cube is rotating And jumping and rotating is considered as a pose to pose example And when it's just rotating without taking any pose is a straight ahead action So how we can implement such principle using CSS So using a CSS it would be definitely Beneficial to start with the pose to pose principle and we can set the time function of using a CSS And we can lead the pose to pose animation to the straight ahead action Which will be easier and feel and add a feel of natural effect into the animation So next one follow-through and overlapping If any action happens that cannot start all of a sudden and If starts then there should be some over overflow or a follow-through action must be there So let's say a car starts moving fast all of a sudden then what happens? It tires screeches the body of the car feel thrust and move backside and When car stops all of a sudden then body of the car move Forward and the driver sitting inside also move for Fill force and move forward. So such things where we can implement on the website So let's say there is an element which is appearing on the website from the left-hand side of the screen to the right-hand side So we can just animate it like It's moving little forward Coming back and getting settled down at this original position. So next one Slow in and slow out. It's kind of relative to the previous one But there is a slight difference between the follow-through and Overlapping action and slow in and slow out action If any element starts moving It cannot be reached at its desired speed at a stretch Whenever element starts moving it gradually increase the speed and reach that the desired speed and move So same way If it want to stop the speed of that element will decrease gradually and then stop at the end So how can we use such principle using CSS? So CSS there is a effect prop parameter, which I have told you regard Which we can pass in transition or an animation So effect is a thing. So slow in and slow out is considered as a ease in and ease out effect Which we can use in transition or animation Properties of the CSS So in the here in the example, you would be able to see that a blue or the upper part of the Image is slow in and slow out where the bottom part is a normal condition In slow in and slow out you would be able to see when the blue block is starting start moving it increasing little bit reaching at the desired speed and After sometimes it's gradually decreasing the speed and getting stopped at the end But in the normal condition, you would not be able to judge any kind of slow in and slow out effect. Is it okay? Shall we move to the next one? Am I boring? Let's say I would like to explain this principle using an example. Let's say a ball is falling from the table So when ball falls from the table, it will never come at its original height again And after falling down, it will move forward and while moving forward It will create a virtual path and if you if you concentrate on the virtual path You would be able to see that the path which is created virtually is in arc shape So same pendulum also works on the same principle the arc principle and how can we achieve this principle using CSS? So while applying this principle using CSS We need to keep two things in mind that ball is moving into the direction Up and down and it moving in the sideways So by keeping these two things in mind, we can achieve this principle very easily The next one is a secondary action So what is secondary action? Action happens after completion of primary action is a secondary action I know I'm sounding stupid, but I Couldn't find any better definition than this so Let's say what is an egg what could be the example of this? So when any man moving where anyone is walking down the street or anyone is walking so at that time movement of the hands Is considered as a secondary action or let's say when someone jumps down the swim jumps down in the swimming pool at that Time the waters when the water spills out of the swimming pool the spilling water is considered as a secondary action So how we can implement such scenario or such principle in? Website, so let's say we have a interface We have where we have allowed a user to Drag and drop the element so when we are just dragging an element and try to keep it between two elements So when two elements just give space to the dragged element and that dragged element get settled down between two is considered as a secondary action Here in the example you would be able to see that when ball falls on the touches the ground the Dust kicks up when the so dust kicking up the dust is considered as a secondary action So next one timing Animation is all about timing if your animation Works very slowly then it will irritate a user definitely So your animation should be that much precise that it should not bore the user It should not irritate the user so by applying a timing function or by applying a timing duration in Transition duration and animation duration these are the two parameters we can implement in CSS properties of transition and animation respectively so on the right-hand side of the image you would be able to see the Ball moving on the first part ball is moving without any timing function It's just moving you will not feel any natural movement But on the third part you would be clearly see that When balls start moving it's going up slowly reaching at the height and falling down at giving you the effect that Ball is falling down because of the gravity force So timing is a very crucial principle which should be implemented using as I said transition duration and animation duration So next one exaggeration So as the word described that what is exaggeration Showing it to Showing a thing too big, but actually it is not is a exaggeration so most of the Cartoon characters Implement this principle and follow this principle in the example also you would be able to see two minions One minions throwing a other minion using a cannon gun So how can we implement such example on website? so let's say When we are implementing An image and showing the image and hovering on it. We just scale up the image little bit Scaling of the image is considered as an exaggeration principle we have implemented The next one solid drawing Solid drawing is nothing but modern browser recently or since three four years Started supporting three-dimension effect So if you concentrate on the white cube you would be able to see that Cube is rotating not on x-axis not on the y-axis, but on the z-axis, which is considered as a third dimension So how can we achieve the third dimension using a CSS? So we can implement translate 3d properties or we can use a perspective property of CSS But while using a perspective property, we should keep one thing in mind That and we should be very careful while using a perspective property because if Anytime animation stops at stops working Then if the perspective property is not used carefully then it could create a very shabby look and smudge look of your element So these example I've tried to show you no no doubt about it. I was not implemented I'm not showing you the actual real-time example, but This solid drawing principle is most of the time being used in games or let's say There are plenty of sliders jQuery sliders available in web world Which is using a third dimension principle, which is created using a translate 3d effects Which could just rotate the slider in the three dimension so last one the appeal So let's say it's artwork. It's a artwork to add soul in the object and Makes it so charismatic that use it will Connect the user to the artist and make the und make it understand that how the animation and what artist is trying to explain and I would definitely say that carefully crafted animation on the web page create an appeal Here I have tried to explain this principle using a simple button Where you would be able to see that at the initial time It's just activate button while clicking it showing a loader icon and it's saying activated that simple But it's creating how simple button can be create an appeal by implementing this principle So after completion of this 12 principle Finally Let's move to the next one When to use animation The first one to enhance the design So I've seen that designers are always possessive for regarding colors You are UX developers are possessive about personas of the website or the application But you are developers are possessive about animation. They are implementing to enhance the design means I Don't feel just to copy the website means copy the PSDs photos of files and implement those photos of files and implement it into the web page. It's not a Easy are not a difficult task But to enhance the design we can use animation and we can move the Elements from here to there and give a rich look to the website So next one interactive web application let's say we have a product and We want to show the manufacturing process of that product. So at that time we can use this Interactive web application kind of where user will interact with the interface user will Means you website will guide the user to Press some button and after pressing or after scrolling down or after any even taking from the user Website will so product will move to the next of process Next manufacturing process step, which will give the rich look to the website Storytelling the third one is the storytelling where we can use This animation So nowadays most of the UI designers and your designers and UI UI developers started creating their websites started creating their use resume is using Website and implementing such resumes in a such a creative creative way, which Means just it would be like you just have to scroll down and By scrolling down it will show you whole life story about that you ID the UI developers or the designers They just put the skills Skillset they have what kind of project they have worked on what kind of challenging they have faced how they overcome and all So next section next slide is where can where animation can be used So first one Navigation I believe navigation is the most important element on the website because Navigation is the only element which is going to be consistent on all the pages and user is going to Use this Element very frequently throughout the website. So let's say how navigation can be as how Animation can be implemented on navigation So while clicking on the hamburger icon. So navigation is sliding down So sliding down is kind of considered as an animation. So we can just wrap up We can implement the slide in effect We can sliding from the left or the right-hand side of the screen or we can just provide a kind of effect where Animation is getting open like curtains. So such kind of such kind of effect we can implement using CSS the next one registration and subscription form So registration and subscription how we can implement an animation on registration and subscription form So while clicking or while focusing on any field element If we feel if we just provide that kind of transitive effect To the element it would definitely grab the user's attention. So let's say While clicking on it the effect it's showing the border element the transition effect border is appearing is a kind of Transitive effect which I have implemented which will means force the user to grab the kind of effect and by click without let's say without filling any data into the field If I just Submit this form The kind of shaky element will definitely grab the user's attention and user will check what they have not filled And what are the required field? So such kind of thing we can use Using animation and we can achieve the user's attention It's the next one related in related animation. I hope all here are working as a In a Drupal shop So let's say you have your in-house product or in-house website But you want to show the let's say there is a page and you want to display the contributor of the month So and how can we implement the contributor of the month? So we can implement we can add the relative content like this as I have implemented over here This is Nick Hill so cool So by hovering on it you would be able to see that it's slightly moving on the left and the relative information is appearing So kind these kind of things we can implement using an animation which will you which will add a very rich Look of the website. So you would be able to see that when hovering The grayscale image is also getting converted to the color one and it's showing the Relative information about me and Nicole So moving to the next how can we how to use animation? The first one interface element animation so let's say There are plenty of time it happens that you are keep clicking on the something but you are not Understanding that whatever you are doing or whatever the event event you are making is giving you any result or not So I will give you an example of it Let's say there is an e-commerce website and there is an add to cart button If you are clicking on the add to cart button, and it's not showing anywhere that item is added to the cart It will make you frustrated and definitely it will leave it will lead to the distraction from the website and In the sales Distraction can be that So interface element animation, how can we use that? so by clicking on an add to cart button if we just pop up the Cart icon and increase the count by one will make the user believe that that Item has been added to the cart and it will stop user to make the same event again and again the next one Waiting animation So the waiting animation it is sales self-explained thing To showing a loader icon and why such kind of means how we can use this animation So means by keeping a loader icon, but it will prevent the user To make the same event again and again and by clicking Stop prevent the user to clicking on the any element of the website So giving showing and loader icon after one click will make the user understand that something is being done Something is being processed at the background and the result will appear soon So when such kind of animation you have you you have seen Let's say in the nine windows 90 when windows 95 and 98 was launched at that time You might have seen by clicking on any file or any folder you would have seen the hourglass effect So our glass was keep rotating So you would be able to judge that something is happening at the back end and result will be come up very soon and In the real world it's Nowadays it's very essential to keep the transparency between the user to make them believe that something is happening And you will definitely get the result. Don't worry. So decorative animation Animation nowadays is very popular in being used on the website But it is very important how radical we are using the animation on the website So, let's say how decorative animation can be used and decorative animation means let's say Hamburger icon is very popular nowadays So by clicking on the hamburger icon Navigation panel will come up but Navigation of by kicking on the hamburger icon it will convert it to the cross sign It will easily understand understand by it will be understood by the user that By clicking on it, it will get converted to the cross sign. So user can understand that by clicking on it It will the open navigation panel will get closed So moving to the next slide, which is responsive animation Anyone who is not working on any responsive website or don't want to implement the responsive kind Responsive web applications or something anyone? Otherwise you would be a caveman So let's say animation Animation also needs space to perform So playing area we are getting on the desktop is very large than the playing area. We are getting on the handle devices So two basic techniques to maintain the balance between the animation and design First one is a focused art direction. So what is focused art direction? Focused art direction is a technique which will allow you to decide which element is important To implement the animation. So let's say there are plenty of elements. You have implemented an animation But suddenly it would be difficult for you to move the element even hundred pixel on the handle devices and if you feel that Animation is not necessary to apply at that time on the handle devices. You can prevent it So I have so I'm showing you here the piece of code Which will let's say I'm give you the live example with this code So here you would be able to see let's So here I have implemented these using by hovering on it It's getting colored. It's showing the relative description about it and It's killing up. So same way when I have implemented in the iPad So I have pre I have prevent the such kind of hovering effect. So there is no hovering effect in iPad So when you know such kind of event is not going to happen at that time we can use the focus art direction technique The moving to the next which is a responsive choreography technique. So what is responsive choreography? Let's say in the larger playground means on the desktop You have a Elements which are appearing in a linear manner means one after another in one line But same way we are when we are implementing and converting into the mobile devices It should appear or it will convert it into the stacked manner So it will appear one after another but in a stacked manner one below the other So, how can we achieve that? So first off first this I have shown you Keep the code of this using a media query. So here I am showing the code How can we achieve a responsive design using jQuery? So resize is the function which we can use or the second one is a very Good example where we can just measure the width of the viewport and Consider if it's less than something then it will be considered considered as a that site is getting rendered in a tablet or in mobile so responsive choreography is very essential and How to show means how to display the correct thing in a linear on the desktop and On the mobile, let's see So you have seen that one element is appearing one after another in a linear manner. So when you are converting it to the To this you would be able to see that Element is appearing in a stacked manner. So this is a responsive choreography So let's move to the next slide. I think this should Make you understand by So senior solution architect because performance is the topic Regarding which all solution architect are more possessive about. Thank you with it. Everybody is with me Hello Please wake up Okay, guys, so I Am being a senior Drupal architect or being a Drupal architect the we worries about performance a lot We get a lot of problem that why have a performance wire of our site is so slow Can you make it perform and and on top of it if I will say I will animate your site? They will be going bonkers My site is already slow and you're saying you will animate it come on man. It's not possible So let's talk about how we can make your site Performance and we can still animate your site So there are some principle and there are some rules which you need to follow if you follow it properly You can actually animate your site the first one These are the things which you need to avoid Don't use these kind of properties when you are implementing animation on your site They are the heaviest properties on CSS 3 come on. I'm not talking about me. I'm talking about CSS 3 So these are heaviest for CSS 3 First one translate 3d So I think you might have followed with it those who are already awake that with is what talking about that translate 3d And one more property known as perspective Which we can use in CSS perspective, right? So translate 3d is a property which is very heavy for a browser to render so what happens is when you are actually working on X Y and Z or Z Axis the Z axis property to rendering for a browser is difficult So for the browser to render that it's okay It will render it will take some time to render it and that will create a performance impact for you So rather than using translate 3d use perspective. So avoid this property altogether back face visibility This is self-explanatory back face visibility. I have a cube So all the cube have four sides, right? Three will be visible on the screen But there will be one more face, which I can't see I have to go back. Can I go back? No, I can't this is only one way I can see the browser So the back face property visibility means that the three side of the cube which is visible There is one back side of that particular cube is anywhere not visible But this property is available in CSS 3 which you can make it true and false If you make it true Which means they are trying to make that when you flip that particular or rate rate rate that particular cube The back face property will actually show the back side doesn't work And same thing if you make it back back face visibility false again The back face property will not going to show the back side property of that cube So rather than using that avoid it. There's no need of back face property anyways The property is still available, but not need to be used and it's quite heavy for performance Will change Anybody heard of it? Yes, we will change So we'll change is a property available in browser which give a signal That something is going to change on this property in future So which means I have 20 properties on a browser which all are being animated and for 20 in five Properties I put will change So two problems one if you tell the browser that something is going to happen in this property in future The browser will not cash that property It will not going to cash those four or five properties where I have put will change Because it know that it's neat. It will change after some time So a performance impact. It is not cashable your property itself Your element itself will be always there and keep on hitting the browser keep on thinking that something going to will change after some time So we'll change properties not required if you are having something for performance because What we need to do is when the element is loaded on the browser It need to be cash the animation is cash. It is easy to render rather than making it will change. It will always uncashable Okay, so one is those are the heaviest properties second technology Now everybody knows and we are already talking about for a while about CSS 3 and JavaScript Yeah, we can achieve a lot of animations and JavaScript I think you might have seen in a lot of sites Sliders and JavaScript effect to create a lot of animations CSS 3 already having those properties available for us transform animate Animation and you translate translation and all but we need to be very careful by using all these things For example, if I have a site on a on a page load I am actually having a big JavaScript file loaded to do all the animation It'll have a huge performance impact on the page load But it can be possible that I'm doing very small animation Which is giving a very good effect. It doesn't require that I need to have the entire page load Maybe an Ajax call. So we need to be very very careful by using all this Preferably recommend it use both Use JavaScript and CSS 3 blend it together carefully based on that created animation for the page So your page can have CSS 3 properties can I have JavaScript or can I have both based on the amount of animations you have on a page Okay, so we are already talked about what kind of properties into avoid Okay, so what kind of properties I can use if they all are avoided So we can use opacity scale rotation position Now believe me using these four properties together Will give you most of your animations on your site If you are working it together for all these four properties using animation Translate and transform and these four properties you can actually do most of your animation on your site So these four properties are very important and they are not going to hamper your performance Your performance will be good and you can use these four Now one more thing we need to talk about is In a website or in a page when we are doing performance impact analysis We always have to see how many properties in a web page are getting animated when the page is loaded So let's take an example that there is a particular page which has I'm talking about 20 Let's stick on 20. So there are 20 elements on that page which are animated But as soon as the page is loaded Now the way to work is is that browser need in the background need to load all those animations And then the page will get loaded a B We could not do that if you're doing it It is have big performance impact on the loading of the page. So what we can do we can delay the animation We can prioritize the animation The page should load and only the most important animation on that page should animate first So the page is loaded. You are able to see the page You can interact with the page and slowly in the background all the rest of the animation which are required are slowly Loading as a jacks as parallel So it's giving a user impact that the performance is not a problem The page is loaded and still in the background all the other animations are loaded So this principle is actually offset animation start time So where we can actually prioritize and delay the animation based on that exhausted Okay, so we are the last one animation in Drupal After that we'll just going to show the demo Yeah over to you with it Thank You Nikhil. So listen architect architect are most positive most possessive about a performance So let's see how we can implement an animation in Drupal before moving forward So let's say as a Drupal is a CMS. It is very essential to I believe that the content For the content we are showing On the website should implement animation but any Drupal is also being used in your e-commerce website and I have already explained How can we use a such kind of animation or different different kind of animation? Using an interface element animation. So various ways we can implement animation in Drupal So let's see first how we can implement animation in Drupal 7 So in Drupal 7 recently these modules developed animate.css block animation wow.js and still full page.js is in sandbox But these are the four modules which we can use to animate the website And let's see how we can implement the animation in Drupal 8 So either contribute all the modules in Drupal 8, porting it to the Drupal 8 and use it Or use the core css or js file of animate.css, full page.js or any other js framework which is being used for the animation So let's see the demo So when I'm loading the page the content is appearing with a kind of zoom-in effect So I have just used the animate.css I will implement the class animated and zoom-in effect So when the page loads it will add automatically such classes to the respective content And it will give you the very nice effect, transitive effect So and as I explain you in the why animation required to guide the user at that time I have discussed about this Click me here button By clicking on this button it will give you the sliding effect and which will take you to the next one So these are the verticals of our company company is working on And while hovering on it you would be able to see the relative description about the relative Verticals So when this initially you would be able to see the description is not showing we are I'm not showing description initially It's high it's hidden when I am hovering on it. It's appearing So it's converting the opacity from zero to one the height of that object is getting converted from the 10 10 percentage to the 100 percentage So you are seeing the kind of curtain curtain is moving upside kind of such such kind of effect You would be able to see and I'm hovering on it Move to the next one Drupal 4 My company is working Drupal for these four major things These more these four more Let's say domain enterprise education integration with third party media and publishing So while hovering on it the relative box is scaling up getting converted to colored and showing the relative description about it So as I've explained earlier while hovering on the image the image is turning down Converting to the colored grayscale image is converting to the colored image and showing the relative information And if you'd have See this demo very carefully that you have you might have implemented the slider horizontally, but I have implemented the slider in vertically So if that's also using a javascript library So here the screen is You are not able to see the navigation Here is here. I have provided the dotted navigation where you just click on any particular section and it will Take you to the Relative section, but it's not appearing over here, but you would be able to see the slightly Bolder icon the black icon over here. You would be able to see that So by that you can just navigate throughout the page by clicking on it So and as I explained earlier Without filling any Information any in field and if we are if I am submitting the form The shaking effect and while focusing on field. It's giving a transitive effect. It's nothing but animation And as I said when clicking on the hamburger icon, it's converting to the cross mark Is the kind of decorative animation we have the user to understand that By clicking on it, it will close the open navigation panel. So let's move To the next one, which is very interesting Any question any questions Or we are good enough no questions. We have explained everything very very clearly crystal clear in everybody's mind No questions required Yeah, just get rid of it Just get rid of those So, uh, there are a few js files html 5 shiv. I think there is a js file there html 5 boilerplate if you google it out you will find a lot of CSS and modernizer is available there So there are some boilerpates available for html 5 if you use those they are compatible with respect to i6 and i7 Older, I think those only right Not next cave navigator Any other questions, please Okay, so yeah, I think the question is how do we deal with animation whilst Maintaining accessibility. So wc3 Um things sorry, I broke it We will still do animate on that and let you know Any other question, please easy ones And the source you showed for the first animation but for the other 11 can we also will we have access to that? Yeah, we can it was anyway very exhaustive session So I thought every all the 12 will be too exhaustive here, but we have all the source code So definitely we can share it out So anybody wants source code we have our twitter handle and email address you can please Send across your details and we will share it out It's not easy to put it public right github or something like that any other questions