how to add animation to shopify

hello,guys how are you today to me,i'm really really good,and today i will show you how to,animate your ecom brand or your ecom,shop,you can also use it to,all your web projects and today i will,use,animate css you will ask me,what is anime css mss,it's just a simple library for your,your web project and you get you can,use it to improve the ue,of your projects and also animate,every element on your shop or your,project,also so let's go guys,first of all you need to install it you,can use,a terminal if you you don't know how to,use the terminal,and that's what i will show you today,the simple method so we're gonna start,it,first of all you need to copy the link,and as you can see the link has to be,put,inside the help of your,html index,so for me i will show you how to do it,on shopify so,you just have to go there inside your,team,you click on action and edit the code,up how you quit this,okay guys you have to go inside the 10,liquid,so sometimes it can be different depends,of your time but the main,you have to put the link,as we copy before you have to put the,link inside the,head valleys so,it's what we're gonna do now we'll try,to make,small place for it,i will put it right there,up,everything gonna be in the description,so don't worry guys,all right see that's it,don't forget to save up,after that you have two methods,you can add directly inside the class,name of your,element but this is not this is not the,the better method to do it because,sometimes,um the element has already a,class name so so it's gonna be,complicated to edit them,all right guys so now,we have to select the element,we want to modify and animate it,so for me it will be the grid,here so i will click,and also don't forget to open the,console,because you need it,so for,to open the dev console you have to,inspect,right click and inspect,you can also open the dev console,from there it will write it will be,written,like more tools,in here that's it now you will select,the grid and to select the grid you have,to,choose the mouse here,and we are in the good section,now open the small arrows,and that's it as you can see when you,your mouse is on and the link,you can see it's already selected so,that's the good grid,okay so now now you have selected your,elements,you need to choose the first element as,writed here in the css,as you can see i already added an,animated effect so i will show you where,it is,you have to put here inside the temp css,liquid file,all your css change and for this case,i will put my animation,to show you no more animation,okay as you can see i have no more,animation here,i will copy this this is the,name of my grid the css name of my grid,and i will copy it inside,inside the css file and,and add my animated effects,so for an animation you have to write,animation double point,the name of your animation so for me i,will,choose back and right,back in right copy,and the duration will be,how many seconds you want to display the,effect,so for me i will put 3 seconds,and now i save it,and reload the page and as you can see,now my grid is displayed from the right,to the left,and as you can see here inside the css,my effect is already displayed so,to change it you can choose,which effect you want you can add,everything,every effect you want,so i will show you i want this one for,example,flip i just have to do it,in the console to preview my effect and,now you see,how it is displayed so that's,it guys i hope you enjoyed it,i try to be clear as much as i can,but that's i will improve my,english and my overall film things sorry,and that's it that's it boys,see ya and take care of you and your,family,bye you

Congratulation! You bave finally finished reading how to add animation to shopify and believe you bave enougb understending how to add animation to shopify

Come on and read the rest of the article!