How To Add Animations To Your Website Easily - With Lottiefiles & Elementor

in this tutorial we're gonna take a look at Lottie files we see them on the page right here we can add this Lottie file right here it's gonna play on a loop as we can see it's looping around and around I'm gonna show you where to find Lottie files from wanna how to add them to the page using an add-on these icons are also Lottie files as I scroll you can see the animation subtly happening as I scroll backwards the animations go backwards the other way which is pretty cool because she had to add live files in the background like Santa Claus right here and it's snowing as we scroll it disappears again into the background as I scroll back up the snows going back up doesn't work that way in nature but we can make a lot of files work that way to scroll down farther a lot of file right down below the young lady sitting on those books that Loudy file does not activate until I hover into that section you can see their mouse cursors up at the top hover in this section not a lot of file place I'll try to set that up and at the very bottom we have two separate Lottie files playing on top of each other the Happy New Year one in the back and the fireworks on the front and there's one more we're gonna create at the very top of the page you might have missed it the first time with a hamburger icon when I hover over it it changes because I use one of the effects available in the audio files widget when I click on it it opens a slide open a vagator menu that's off canvas then the X over here is also animated with the same lobby file just a different part of it there's how to use the same law to file and select different parts of it for different animations on your website click on that X and the menu closes I'll show you how to do that as well my name is Beorn i'll pass and open our lab we help you get better at WordPress you can earn more for yourself for your customers and for your business if you haven't done so yet make sure cook subscribing the best you don't miss any future videos and make sure you click the like button because it really helps my videos everybody's videos really in the YouTube algorithm helps us rank better and get more views and reach more people and help more people build more awesome websites now let's get back to this Lahti file tutorial in my assessment there are four main reasons why a lot of files are awesome one is the integrate easily with element or using various plugins and add-ons two is they look great you see one right here this is a lot of file three is Lahti files can be interacted with and programmed to do what you like for example if I click this boost button right here this Lahti file this I was gonna speed up he's gonna drive a whole lot faster and then it slows back down to the speed that it was and that's an example of being able to interact and programmatically change how a lot of file works on a website number four the fourth reason fourth and final reason to my assessment is they are super lightweight meaning if you have a PNG file that's animated or a gif file it's animator or lobby file it's animated the lobby file is a whole lot smaller as you can see right here if I missed any reasons my files are awesome please leave them in the comments down below I'm pretty sure I nailed the most important ones but there's always a chance I missed something little fun fact before we get started lotty files are named after someone who is named lawdy lawdy Weininger from germany she was the foremost pioneer of silhouette animation and she created the first feature-length film that we know of called The Adventures of Prince Achmed which came out or was released in 1926 which is older than Walt Disney's for his future length film Snow White and the Seven Dwarfs which was released in 1937 over ten years later so that's where the name came from last fun fact before we get started lotty files were created by Airbnb for the Airbnb website and they opened source to technology and now we all get the benefit of that there's been a bit of an underground grassroots movement spreading a lot of files around the internet but now they're becoming more and more mainstream because they are actually awesome to find Lahti files that you can use you can go to lolly files comm I'm sure other repositories so these this is the most well-known one that's the one I know of a lot of them here are free they have tens of thousands of free Lahti files but they also have a marketplace where you could buy alati files if you wanted to I don't think you'd need to because there's so many of the free ones and you can even make your own if you have some After Effects skills you can make your own Lahti files that's the subject of another video anyway on this page you can go to animations and go to recent popular or covert 19 which is currently a trending topic or you can search for something you could search for boat for example we see a whole lot of boats appearing and these animations are looping we can manipulate that on the website we can have them go loop one time or just play one time play when they're clicked or hovered on or when you're scrolling we'll get into that but right now suffice it to say there's a lot of animations if you click on any one of them like this one for example you see more options the options we care about today are already download JSON if I click on here then choose lotty JSON we have to log in or create an account if you have not logged in the accounts are free but you do have to have one to download the JSON file I'm just gonna log in to my account and they get this on twists that we're gonna use a plugin there's a free plugin you can use in the WordPress repository it has a few options but not that many I'm going to use a paid plugin called the plus add-ons it has over 120 different features and widgets I've covered all of them in a tutorial link to in the card above in the description down below it's an amazing plugin it also has a lot of integration with way more options than the free one you'll find in the repository but the process is kind of similar when you use either one so you can follow along phone use the free one or the plus add-ons but I recommend two plus add-ons because there's more options and that allows you to do more things so in the plugins here all we have installed right now is the plus add ons for Elementor element or element or pro and once we have the plus add-ons installed we have to do two things in particular let's go to the plus settings go to plus widgets we have to make sure that on here we have lobby files turned on just going to search for them there's a lot of widgets here like I said here a lot of file animation to make sure this one is toggled on you can toggle on and off any one that you want in here and we have to go to the extra options and scroll down to the very bottom and make sure lobby files back-end j/s is turned on that allows us to view the lobby file as we're creating our Elementor pages in the backend and set this to at least 30 this little field right here and then click Save and now we're gonna go to our page I created a simple page called body files demo I'm going to edit with Elementor I've loaded in just a regular element or template from the elementary template library and I used the canvas so I don't have the menu at the top and it's just the template now we're going to add a bunch of Lahti files to this page and see how they work with the plus add-on settings what I want to do is replace this image right here with an animated one I have a bunch of results or a bunch of tabs open at the top these are just body file pages so everybody who submits a file to body files has a profile this is istván and this these are lobby files he's uploaded and it shows them on his profile page so when you're in the search results you can see let's go out to the search results with a boat if I can get there I think I can get there I got there so here it shows the boats and below them has the thumbnail and a person's name click on the person's name it shows all the lot of files they've submitted to Lottie files comm you can use any one of these as long as you're not part of the marketplace so I want to use this one right here the shop so if I click on there and then choose download JSON body JSON downloads right here click on the up arrow click on open and this will open in my case them sublime text in your case it might open in sublime text or a different text editor or Firefox or Google Chrome it's gonna open somewhere then you want to press command or control a to select all and command ctrl C to copy then go into Elementor look up lotty in the widgets drag and drop it over paste it in right here with the JSON code we paste in all that code is copied and we select load and back-end and now we see our file loading right there you can delete this one and now we have a great-looking little JSON animation right in our page super simple is copy and paste that in if I click on it we have more options so under main settings we can choose to autoplay which means it just plays all the time like it's doing now we can have a play on hover so as a mouse hovers over it it'll play and then it will loop continuously after that because loop animation is on you can also have it on hover so it only plays once when you hover and it plays right to the end of animation whatever that end happens to be if the end happens to be the shop disappears and that's the end of the animation that's the animation on Lobby file so depends on how the creator created it luckily inside here if the animation ends too early which was seeing some examples as we go then we can actually change the start time and end times specifically the end time to stop the animation before disappears so it stays on the page anyway this is on hover we can also play on click and we can also play on column hover as we can see this is a column area if I hover on this column doesn't hover if I hover on this column it does hover we can also hover on section so if I scroll down a bit you see my mouse is on lower sections not on top section as soon as I hover into the top section anywhere the animation will play it can also have a mouse in effect so my favorites because it as you leave it goes backwards so you have your mouse over it starts appearing and then it plays backwards when your mouse leaves I think that was really cool I also have a scroll parallax which means it appears as you scroll this is a poor example criticism where I want to design that example but this is what happens it'll play it backwards and forwards as you're scrolling and you can also have viewport based which means the animation will not start playing until it enters your viewport so if you have the animation set so it appears halfway down the page it will want to start playing until it's within your viewport so a person could spend 15 minutes on top of half of the page but that animation is not playing at all until they get down to the specific spot where it exists and that's the power of the viewport option I'm going to choose for the top one auto play this hair playing over and over because I'll loop it it's gonna play over and over on the top of the page like that and for the animation speed you can make it faster slower whatever you want there and the customers start time and end time we get to that in a different example you can have a URL associated with it so if someone clicks on the animation they can go to that URL but you can delay the click so for example if they click right now we put a URL in here like like this website for example put the URL in there and the click delay right now is 1000 milliseconds which is ten seconds and that will be when the click happens so if you click now that would give it time for the animation to play and then the click will go through what you probably want to do here is not have this go far beyond the animation to find the time the animation go back to body files calm and we can see in the bottom corner are really small it says 151 that is the length of this animation in milliseconds so you can come back here and put in 151 and then it will play right at the end of this animation they also notice this animation is at the completed stage right now it's not going to change any more after this stage that's only 83 milliseconds into the animation so we could change this to 83 because that's when the animation actually ends even the animation file goes longer there are no more changes beyond that time so that's how we do the click not going to turn that on you can have a heading and a description if you want I'm not going to turn those on you can choose how to render it SVG canvas or HTML canvas being a css3 element and html5 also having animation capabilities I stick with the SVG's that's the main settings for any Lahti files are gonna add to our website I'll be going a lot faster when we add the next ones because I'm not gonna go through all these settings every time layout options we could choose left right center I said those in wrong order but you know what I mean we can change the width like that we can change the height if that's relevant to whatever particular file you're using you can change these based on device type as well so if I wanted it much smaller on tablet and then much bigger on phone you can do that like the desktop look like up to a hundred percent and those are our options for the lotty file content there is another option that we're going to use for the on scroll method I'll show you a bit later but suffice it to say those the options inside widget and now we're gonna carry on so we've added that one at the top I want to animate these icons because icons are great they're very popular on websites there are SVG draw icons available in the + add-ons plugin as well now I'm going to use Lottie file add-ons or Lottie file animations another animator I found named hey-zeus has a bunch that look just like this he's purple background ones I really like them I'm gonna click on the shield and choose download JSON download body JSON downloads it opens it I'm gonna copy this you here my computer fan going because the Lottie files although they are a lot smaller in size when I'm on a page where we have 20 of them playing all at once it does use quite a few resources so my computer fan kicks in while I'm doing this let's look up Lottie files again so hopefully it's not too disturbing that fan paste the code in there load in the back end and boom there it is gonna change the size a little bit make a little bit smaller layout options a little bit smaller I'm gonna copy the text here and then delete that and just add text like that now we have a little icon created and it's pretty slick I must say and as I was playing around I found that you can't easily copy these elements so if I try to copy this or duplicate it duplicate works but when I copy and paste it watch what happens copy that column paste it over here we have the animation double up in here and not go over here I don't know why so I stick with duplicating I'm gonna copy and paste the original code back in here properly there we go and now I'm just gonna edit this one by adding a different code let's take this one right here download JSON it's getting to be pretty old hat now you just find the one you like you copy the code into here and boom it's in let's get one more I like I like this one download that and open it copy it let's duplicate this click on the lobby file widget paste the new one in it always says JSON not working at this loading but it works just fine and then we go delete on all the other columns and delete and delete now we've got pretty slick icons here I think anyway I think they're pretty slick maybe I want to have these not operate all the time but just on scroll so let's change that let's go to the main settings from autoplay and choose scroll parallax instead you can see over here the animation is stopped and as we scroll nothing's happening because it's based on custom height right now by default and we see it appear as we get down to the very bottom that's not how I like it you can change the offset to get this to work exactly how you want it but I don't like how it appears and dissapears so I'm gonna choose instead of custom height document height so now it starts playing at the very top of the document and as you go down it keeps on playing until you scroll past it so that's the optional I could choose for that I'm gonna choose that for the other ones as well choose where is it scroll parallax document height and this one to scroll parallax and document height and now as we scroll we can see the animations are running when we stop scrolling they stop scroll some more they run again scroll backwards and the animations play backwards I gots a pretty cool look for those icons let's go down - here let's replace this one and I'm gonna replace it with this young lady right here down on the JSON file open it copy add the lobby file widget paste it in there paste in the JSON code load in the backend boom we're done that's how fast it goes leave the original image and now we have our lobby file this I'm gonna change the settings so just runs on a section hover because I have it on hover there's no guarantee they're going to hover over this element and they might not see our cool animation which we want them to see on column hover same thing as the element takes the whole column so I wanna have it on section so as we hover into this section they'll see it and it can loop from that on that's fine by me and I like it the next thing I want to show you is how to use lobby files to have them behind layers and then as you scrolling they might come out from behind those layers and you can see them and there parallaxing meaning the animation is playing as you're scrolling and at some points the animation Falls with you at some points it doesn't hopefully that made sense I think it'd make more sense when you see them doing I'm gonna duplicate this section I'm gonna change the margins there's no gap and I create another section I'm going to move this up to be in between these two I'm gonna give it a custom height of 900 there we go and this is where animations gonna appear so as we're scrolling I'm not gonna see it as you come down here it's gonna pop into view it'll disappear again as we scroll down here and I want to do this with the rocket ship because I like this rocket ship I wasn't able to click on it earlier I still can't click on it they can't find my rocket ship this happens sometimes for some reason things are removed and they don't work as they should so let's find a different one obviously these other ones that I have open already here's a rocket ship but it has the landscape and background stuff I don't want backgrounds I just want a clear background like these ones here transparent background so that one's not gonna work it's gonna use this Christmas one why not download JSON open it copy all that and put the lotty file right in here paste the code in load in the backend we have Santa Claus with the trees blowing in the breeze and a little bit of snow coming down that's pretty cool great for a Christmas theme which is not now it's almost summertime but anyway change the scroll parallax and now it's gonna animate as we scroll and that's what I want but I also wanted to go behind other elements so gonna go to advanced I'm gonna go to positioning gonna change the position to fixed and now it's gonna scroll with us you can see come with us right now but it's only half the animation it's not what I want and now that we have fixed the positioning to four change positioning to fixed it's hard to click on that's not great either let's change this back to default we'll change the positioning last at the very end so to get this back or to have it not appear halfway we need to use the document height and this will make the animation or position the animation right in the middle of the screen which is what we want and we want to change the Z index so I'm going to click on the section settings go to advanced make sure the Z index is the lowest on the page I'm gonna make it zero I'm gonna make this Z index bigger gonna make it one every other Z index has to be larger than the one that you want to hide behind this is basically a stacking order if you think of a stack of papers on your desk the lowest papers of z-index of zero the next paper up the index of one or anything higher than zero then the next paper on top of that one has a Z index higher than the previous one in my case would be two and that's how you can visualize the index this that's how I do it so now we have all the Z index is set now let's go back and change this again from default position to fixed and I thought we'd changed the document we did it so I'm not quite where I want to be I change the size it seems a size that's a bit better okay so now as we scroll we see it's behind but these top ones it's not displaying how we want it to because these top ones don't have a background color so let's add a background color of white and then Santa Claus would be gone background color of white on that one and now as we scroll it's no Santa Clauses here cuz that's a margin let's get rid of that margin make that zero oh not five hundred zero so now Santa Claus is still there he's just hiding behind all the other elements there he is he's appeared disappeared behind this one disappear behind this one and he's back here again because there's no color on this one let's change the color to white background color and now it's at the very bottom - this is not part of the live page this is just a linter editor work at intersections so now we have Santa Claus appearing just oriano and the animation runs forwards and backwards depending which direction you scroll you don't have to put this in the background Atta as we saw the scrolling effect works on stationary icons like these ones here our stationary Lottie files like these icons we scroll and they run backwards and forwards there's want to show you I want to show you to Lottie files stacked on top of each other which I think you'll be a pretty cool effect I haven't tried this before but I think it'll work let's test it out so let's make a new section let's give it a background color of white to make Santa Claus hide behind it and let's put in the lobby file widget and I'm going to add in where is it this one right here it's a little updated this is the transition from 2019 to 2020 happy new year but we're gonna use it anyway it's not really outdated still 2020 but it's it so it's long past New Year's so we paste in the code here we load it in the backend and here we have our animation playing make a little smaller under the layout options and what I want to do is have a lot of foul play on top of this it's gonna add another body file other section without a lot body file and it is going to have a clear background it's going to be from the same gentlemen I believe milk not from the same one this guy right here it's kind of party streamers flying up in the air so we have it open in the bottom not open in the bottom we open it copy the JSON code paste it in there load in the backend here we have our party streamers something you'd expect to see on New Year's let's make this a little smaller and actually has a white background so this one's not gonna work how I wanted it to because I want to move this over top of this one here maybe we can change the blend options so let's just move this up or as we can let's not have the bottom negative margins through the top negative margin there we go it's right on top of the other one right on top of the the new years one this one's not gonna work how one X has a white background so I'm going to pause it and find another one without a white background because those are the ones I've been finding the most useful for my purposes anyway so I'm gonna pause this find a different way than the white background okay I'm back and I found these fireworks explosions on ladee files comm by Omar and it does not have a white background that's what we want so I'm gonna move this up over top go to section settings move this up over top of this 2020 happy new year so let's go - 600 get in there - 900 there we go it seems the size that's a bit smaller size of the lobby file or a lot of the animation there we go now we have to Lottie animations playing on top of each other which i think is pretty neat the trouble is with this effect you have to use a lot of negative margin so this makes it hard or impossible I should say to select the element behind it without moving the top element back down or messing with the Z indexes which can get tedious and painful but if you're dedicated you can make this work - Lottie files or even more than that playing on top of each other just like this there are many more use cases for the + add-ons and Lottie files but I just want to show you one more application I'm gonna use a hamburger menu or create a hamburger menu where someone clicks on the menu icon we're just going to this animation here I'm gonna use the hamburger portion of it somebody clicked on it it's going to open a slide-out menu then we're going to use the X portion that they could then use to close that slide out menu so to do this go ahead a new section and I put it at the very top of the page it's going to drag and drop that right to the top and I'm gonna add body files audio file widget so I can drop that right there and get the lucky file from here I get the JSON code I mean open this copy that paste it in here and turn on load in back-end and now we have our lot of file right here it is huge as you can see I'll shrink that down it's a go to layout options shrink it down to about that size is pretty good this blue line you see in these little bubbles that is the Santa Claus animation they can see down here so you don't want to have that in the background of our lobby file so I'm going to make this background color for this section I'm gonna make it white like so and then change the z-index to anything over 0 let's make that one and now the Santa Clause is in the back and it's gone we're also gonna move this light file to the right or light to the right and we're gonna add some negative margin this is because the spacing and the slotty file is not quite how I'd want it so it's a Santa Marta at the top to move it up there we go let's add some to the bottom two to bring the bottom part up a little higher so it's not so much white space now we want to limit the animation to be just the hamburger when it shrinks down to the single line and that's it so to do that let's go back to original one on the audio files website and let's take a look at where this animation exists so I want to have the hamburger icon it shrinks down to being just 1 so 15 milliseconds is what we'll use to do this I click on the lobby file make sure it's selected have a bunch on the page I want to select the wrong one and applies to the wrong lobby file I'm gonna go to main settings start animation or custom animation start time 0 custom animation end time of 15 and I also want to change this to be on hover so the animation will play when it hovers and I'm not gonna make it loop so we hover over it the animation place I'm going to change this to Mouse in out effect like that better for this one so it goes it shrinks as you mouse over goes back to the Hemmer arcanas you mouse away I like that ok so now we have that effect in place for this page we want to create the actual pop-up menu I'm gonna press update so we save our changes and with Elementor Pro we can create pop-ups under templates I already created one I'm gonna open this to show you how it looks and here it is right here on the right hand side and this was built using a process very similar to the video in the cart up above in the description down below I show you in the video how to create these pop-up menus in great detail it's not going to show you how to build it in this video I'm just gonna show you to adds a lot of file functionality we're going to do in this video we're gonna replace this little X icon I'll show you how it works right now so if I go back into our page or we're adding this make sure I click on the lobby file under main settings we're gonna turn URL on change the type from normal to dynamic for the URL I'm gonna click on the database that I'm tags icon there and choose pop up now when I click on pop up you can choose to open a pop-up this is the action of that button does so in this case we do want to open a pop-up when someone clicks you can also have a close a pop-up and toggle a pop-up so I'm gonna choose open which pop-up I'm gonna write in here or start writing the name of it so off-campus template pop-up under one I just pop up to there now we ever pop up populated here it's a lot of popping going on and now if I update this I can go and view the page the live page click on the icon our pop up menu appears click on the X and it closes but now I want to have that X would be a little more dynamic have it be animated with our live files in fact the exact same Adi file just a different section of it so let's go back into this page and let's add a new section click on the plus icon go drag a widget in here it's gonna be the lobby file widget as you probably guessed drag that right in there I'm gonna use the same code from this Lahti file just to prove it to him I'm gonna get it from the website I'm gonna get it right from here copy that and paste it in here load in the back end and there we have it let's close this let's change the size make it smaller float to the right now we have the file here we want to also add a custom start time and a custom end time so the start time is going to be let's start it here on the X so let's make it 33 and the custom end time is gonna be when the X goes down to ask you something starting to play the flat let's make that 55 there we go and I'm gonna have this also be Mouse in out effect which I find works best for this kind of effect let's not loop the animation and now we have up here we can see but when I hover over the X appears I wish you could run the lobby files in Reverse because they make more sense to have it be a line and then you have over it and the ex comes because this kinda looks like the ex is hiding as you hover over it anyhow we have that there now the URL could turn that on type to dynamic dynamic tags pop up we're going to choose sort of open pop up like I did earlier and choose close pop up now when someone clicks on that it's gonna close the pop up last thing we have to do is get rid of this X the black one which is what Elementor adds in go to the gear icon and turn off close button and now it's gone and also maybe change these margins a little bit this is not so important this is just for Vanity's sake I guess state navigation has got a lot of space on top there we go so that's all done like I mentioned have a complete tutorial showing you how to build one these off canvas menus which are pretty slick linked in the karp above and the description down below it's update this not gonna have any display conditions just click on save and close because we have this added directly to this page here if i refresh this page let me click on a hamburger icon and we haven't had navigation and it's not quite how I want it to look so let's add some more space at the top so come back out here for the navigation in fact the body file itself let's add some margin at the top and something I forgot to do and I'll show you the mistake first so you know what it is when you went you happen to do it as well possibly come back out here refresh after saving that click on the hamburger and we see the X isn't there why that happens is because there is an option inside the Lottie files inside all of them I may have seen earlier call it element or pop-up so when you lobby file is in the pop-up want to turn this on update save them close come back out here refresh now I open the pop-up and there's our fancy X click on the X and it closes our pop-up click on the hamburger and it open look on the X and it closes there's no use case for how you can use live files on your website to make it highly customized if you like what you saw in this video make sure you check out the plus add-on to plug-in this is the website right here it's linked to in the description down below click on that you will come here you can go through all the widgets that are available all the listing types that are available all the extras that are added to other existing widgets in WordPress all the design options extra templates extra UI blocks all of these there's over 120 of them in total of these options and widgets and design features there's a lot there's another tutorial in the cart up above in the description down below it shows you a walkthrough of all of them that I did recently so make sure to check it out lobby are these ones right here lolly file animations and body files on scroll that's kind of what we covered in this tutorial and there's a whole lot more to this plugin as you can see so make sure you check it out I'm sure you agree lotty files are pretty awesome and the plus addons plugin allows you to add them to your website really easily check out this tutorial here where I cover all of the features and widgets in the + add-ons plugin there are a lot and if you liked this video please click the like button because it helps them YouTube ranking some YouTube algorithm and make sure you share it if you found this video useful share it on Facebook or Twitter or wherever it is that you share please share it it really helps then click subscribing the bell so you don't miss any future videos my name is beyond all pass and w learning lab until next time keep crushing it and I will see you in the next video

Channel: WordPress Tutorials - WPLearningLab

Views: 4,895

Keywords: how to add animation to a website, how to add animation to your website, website builder, animate svg, animate svg tutorial, javascript animation, lottie animation, lottie animation webflow, lottie file animation, lottiefiles, lottiefiles after effects, lottiefiles animation, lottiefiles elementor, lottiefiles plugin, lottiefiles wordpress, svg animation tutorial, svg for web design, web design svg animation

Id: 2TQMaXzREQ0

Length: 38min 22sec (2302 seconds)

Published: Thu Jun 04 2020