💫Motion Effects Elementor PRO Tutorial | STUNNING 'Flying Phone' Effect

hi everyone and in this video we're gonna be using elementary motion effects to create a similar effect where we have a number of elements moving as we scroll down the page this effect was inspired by the presentation page of Google phone and it's not product placement in any way it's just the design that inspired me to create this kind of tutorial and maybe even if you don't want to recreate the exact same design on your page you might pick up some interesting techniques from this video and at the end of the video we'll also try and make this design mobile-friendly and try to adapt it for the mobile devices such as smartphones and tablets and I remind you that motion effects settings are only available in elements or pro so unfortunately you cannot get this type of functionality in the free version of the plug-in so what I did here is created a similarly looking page so we have pretty much the same structure and I've added three elements in here three phones those are essentially PNG images with a null background and I'm ported them into my media library and with the alimentar editor I created this animation effect and we're going to now jump into the element editor and see how we can do exactly that this were created with the help of iPhone mock-ups that you can also get for yourself on Sampath monster.com which is a marketplace selling products for web developers and web designers and which I'll be talking about later at the very end of this video and now let's get straight to the tutorial so we're now here in elementary and what I will be using in this video is a navigator it's a really handy tool and it really helps you see all the elements you've got on your page without the need to scroll down without the need to really find where this section is where that widget is or the column is etc you simply scroll through here and you find what you need to open and what you need to add it right from this little menu and what I did in here is I will be mainly worried Kien somewhere around here with these three sections and I just renamed them so it's more comfortable for me and to open the navigator you will simply need to click this little icon in here I'll use the control I or command I depending on what machine you're working on this is a shortcut and simple combination of the keys on your keyboard or you can also click anywhere on any section and find the navigator option in here this is how you open it and it could be either flying somewhere around here it's druggable or you could also stack it in here and it's going to be static and just stay as a static panel in here but I'm just gonna place it somewhere around here and let's actually start add in that hero section this part of here section that's going to contain our phones is gonna be animated and I click on add section button in here and I'm gonna select the two column layout straight away here it is here is what it gives me and I'm not gonna change anything just yet concerning the settings of the section and the settings of the columns what I'm gonna do is alright let's first rename it it'll be called two phones and now you're gonna get to the elements and drop an image in here and this is gonna be our first image our first phone go to our media library and here it is simply drop it in here so here's where we have our phone now it's time to change some of the position settings before we proceed to add in more phones first thing you could change this one to fool but I'm gonna leave it as it is at large it's gonna be enough just for now and I actually exported these pages as images of one-to-one ratio and this were 1080 pixels by 1080 pixels so they're completely square and depending on your images some of these settings might be different so you just going to adjust this values depending on the size of your image but this what my sightings are it's 1080 pixels by 1080 pixels no background all right now in the salt app gonna make sure that the width and max with these both are 100 just to make sure that everything is working the way we want it to now in the Advanced tab what I'm going to do is to move it move this image more to the center of our page and I can do that if I use some negative margin and also one important thing I'm not gonna use pixels to move my objects I'm gonna use % values and this is important because it's gonna make a drastic difference when your website is gonna be viewed on screens of different size right and now we'll get a jump to the right margin and ad minus 40 it won't allow me to you ad - with my keyboard this is what I'm gonna use the down arrow in here to add minus 4 and then 0 so this is what we get kinda where we want our phone to be and it's gonna be enough it's gonna be it at this point and I'm simply gonna duplicate this phone right click duplicate and I'm gonna drop it this widget in the second column that I have we're gonna replace the image would the second phone this big phone number - and not gonna change anything here but in the Advanced tab what we're going to do is remove minus 40 from the right margin and add minus 40 to our left margin so we moved this phone closer to the middle to the center of the page as well all right we are halfway done what I want to do now is quickly jump to our reference and here another example one of the phones position a little higher than the other one and since we are going for almost the exact same look let's try and replicate that as well and I'm gonna switch back to this image and if you're looking at the NEB Gator you might notice how when I switch to one of these widgets the focus here changes as well and it's gonna be really handy when we'll be working with three phones and some stuff is gonna be overlapping and it's not gonna be really comfortable to go to the actual frames of the widgets and click on them to be able to edit the widget or the section or the column or whatever this is why we're gonna use navigator more excessively but for now we're good anyway I'm gonna click on this phone again and I'm gonna add 10% since we're working with percent values just going to add 10 percent at the top margin so we're pretty much done with the two phones not gonna add any animation just yet I'm just gonna position our third phone right here and then we'll proceed to add in motion effects and for that I'm gonna create a new section with a single column this time I'm gonna duplicate one of these phones doesn't matter which I chose the one which had no margin at the top and I'm gonna drop it into the new section like that now it's huge and of course we don't need it to be that huge this is why we're gonna jump to the style tab and change the width to 70 and I'm also going to remove the negative margin because it impacts the size of our phone obviously and also we don't really need it to be on this side we need to be straight in the middle of the page now it's time to change the phone to this one it's gonna be our third phone and pretty much done with the positioning now now let's set it up for the animation now what I wanted to do here is rename this section third phone so we got two phones in this section each in its own column and you get the third phone in a separate section another thing we need to do is move this action up again we're gonna use negative margin switch 2% and I figured that 23 for the size of my images and for my purpose for my particular animation it's gonna be just fine like it's gonna slide just well between these two phones and now it is time to start adding motion effects first I'm gonna animate these two phones let's jump straight to them so here it is this is my phone on the left and let's rename it really quickly so left phone and right phone we got two phones and now motion effects this is the tab that you're only going to have if you have Elementor Pro if you don't you're not gonna be able to add any motion effects like scrolling effects or Mouse track effects now we're going to be working solely with scrolling effects I'm gonna enable it and as you remember in our reference as we scroll down the first two phones they slide to the sides so we need to use the horizontal movement in the x-axis right and we're gonna enable horizontal scroll for our left phone now and again some of these settings here some of the values I'm gonna be changing might be different for your particular image for your particular animation now I'm gonna change the speed to 6 this is what I figured is gonna be the best fit for me for my particular purpose and here we're gonna talk about these slides a little bit later now what's important to notice is that effects relative to has to be set to viewport it means that this slider that you have in here from 0 to 100% is going to be from the top of your page to the very bottom of your page this is what is gonna be basically and using these slides you can now control at what point the animation is going to start and at what point is gonna end let's say if I sided to 30% it means once my object reaches let's say a third of my viewport the animation is gonna start so let's just play back and see what's happening well not playback but actually scroll so now I'm scrolling up and down and they see that no matter where in what direction I scroll the phone keeps moving and this is not what I want I wanted to start animating only when I scroll down and only when I scrolled past it and at some point I wanted to stop I don't want it to move like infinitely this is why I want to change the starting point and the ending point of my animation also one more quick tip I'm using the flexible Elementor panel plug-in this is a free plugin and I'm gonna link it in the description down below and you can find it in wordpress.org it's a really great help if you sometimes need to preview your page as it is as it's gonna be when you preview it without the elements or editor so what I want to see your entire page and you want to see the correct the right position of your objects on the page but they still want to see the settings at the same time this is a great solution it's really it's been really helpful and right now we really do you need to see where our objects are on the page because we are gonna be moving them and this is why you can grab your elements or panel and drag it around and it's not stacked on the left anymore this is a great solution and if you need something like that then you could just download that plug-in and it's gonna be possible to do with your elements editor as well all right back to the settings of our left phone what we got to do here is let's say I wanted to start moving once I just scroll past it so it's somewhere in the middle of my viewport this is why I'm gonna need somewhere like 50 percent like that let's try it all right it's perfect but as we scroll past it it still keeps moving it doesn't stop but I really do want it to stop somewhere around here all right let's just place it somewhere here I just wanted to stop somewhere around this point and to see where I wanted to stop I could just just hand somewhere in here and start moving this slide and I will see at which point the animation is going to stop so I just needed to move to the side enough so this third phone can slide in and for my purpose 63 is gonna be just enough I don't want the phone to move any further than that so this is gonna be my setup 50 and all right 65 65 is gonna be at 50 and 65 50 and 65 so these are my settings for the first phone now again jump to you the settings of the right phone of our second phone and enable motion effects scrolling effects horizontal scroll and now we need to move to the right the opposite direction also set the speed to six if you remember we said the same speed to you this first phone it was six as well all right now 50% will be the starting point as well and 65% will be the end point yes this has been perfect so far now it's time to animate the third phone this is gonna be a little bit more tricky all right so now we have to animate this third image so it moves up and down as we scroll down the page so now switch to the content tab now to advanced motion effects and I have to enable the vertical scroll since is gonna be scrolling up and down and not to the left or to the right and I'm gonna leave it as up for now and the speed I have to set it to the maximum available in here which is 10 and actually you can also set even higher than that you can set it to 12 so this is what it looks like now it slides perfectly in between these first two phones and then we proceed to see the rest of our page as we scroll down now the finishing touches what I would do is move this section up a little bit since as we scroll down we have a little bit too much space right here so I would say that I want to move it up by adding some of the negative margin in here I would say minus five and we are getting this little issue in here right now pretty easy to fix we just gotta go to the section that contains our third phone through the entire section click on it and here in the Navigator and set does that index to a higher value let's say let's say 50 it doesn't really matter what well you said it just has to be higher than the that index of that object which has to be underneath this one which has to be underneath at this phone and by default all objects on your page are going to have the side index of zero and now as I set it to 50 this phone is gonna be on top of this section so this is what we are getting now let's jump to the preview and see what it looks like with out any extra elements on our page so we only see our phones so this is what we've got so far a little thing that bugs me a little bit is that since these phones are not exactly on at the same position in the viewport they start animating with a tiny difference in time they do not start moving at the same time this phone because it's a little bit higher it starts moving to the right a little bit earlier and this is pretty easy to fix we have to get back to our elementary editor go to the settings of our left phone and in the horizontal scroll settings I will change these settings a little bit I will just move them a couple percent closer to the bottom edge and it's gonna be somewhere around 49 and 63 but what I'm doing right now is specific to my particular case and this is what I mean by I just seen the settings and values to your needs because depending on the images you're using the position of these images on your page you might need to change the settings a little bit but in this video I'm just trying to explain the logic behind everything that I'm doing to create this effect now I want to preview it once again with the changes that we have applied and now the phones they have to be moving at the same time animation has to start simultaneously for both of these phones yes it works now it works perfectly now the timing is perfect and now I'm satisfied with the way this animation looks so a pretty much done with creating this effect and what is left for us to do is to try and adjust it for the mobile versions as well the issue here is that when you set the motion effects to your objects like scrolling effects or Mouse track effects they do not have the responsibiiity options as you have for example for the text for the object size let me show you and we switch to the responsive mode and we select one of these device so let's say we select mobile device if we select one of these widgets in here you can see that we start seeing these icons in the desktop mode will only see one of them just for now in the mobile he we see three and in a tablet he will also gonna see three of them and they allow us to set individual settings for each of these types of devices here you can see the breakpoints and by the way in the elements or settings you can actually change the breakpoints you can set custom breakpoints for each of these devices like tablet and mobile devices and for example for the text object what you can do is set a different font size for mobile devices when you view your page in the mobile view because the size that you set for this particular text for the desktop device is obviously too big and this option allows you to set individual parameters for each of these objects for different devices and what we could do here is obviously we could jump to the settings of the column and place these phones side-by-side like they were on our desktop device so it doesn't seem like a big deal you simply jump to your motion effects and you adjust the sliders but the problem is that you don't have this responsive options in here the value that you said in these fields for any of the motion effects are going to affect your objects on all the devices on desktop device on tablet device in a mobile device you cannot change these settings individually for each type of device this is why if I set the speed to 6 the speed is gonna be at 6 at the value 6 no matter what device I'm viewing this page on this is a kind of an issue and it doesn't really allow us to fully adapt this same section the same design for the mobile devices anyway if you want to preserve this exact hero section with this exact effect on mobile devices as well which with motion effects might not always be the best option that you could go for because of the compatibility issues and stuff like that you could actually simply jump to the motion effect settings and turn them off on mobile devices just like that and do it for all of these three turn them off on mobile and decide for yourself if you want to turn them on or off for tablet devices and you could just hide this section go to the settings of the section jump to responsive and hide on mobile and this is what you would get on your page without no extra hustle without no extra effort this is what you could deal with the current number of sections another option you could go for is duplicate both of these duplicate the section with the two phones in here and duplicate the third section as well and place them just like that one after another so three phones right here and three phones right here alright they both work both of these pairs of sections work now I have two of them and what I want to do is to make one of them work only on desktop and on tablet and be animated and the other one only work on mobile and be hidden on desktop and on tablet and be animated with the specific settings that fit the mobile resolution I have to warn you though that this technique shouldn't be overused because the elements that you hide I still been loaded together with the rest of your page they're just not being displayed after some specific breakpoints so use this feature carefully and bear in mind that it might affect your page load time depending on which and how many sections you hide I'm showing this to you right now in order to demonstrate that this is actually possible and if you want to go for this solution you could but again have to warn you that these elements are still being loaded but they're simply not displayed so if you want to see how to do that bear with me and we're gonna figure that out all right so this first two will work on desktop and on tablet the settings for desktop shoot look also fine on the tablet as well and what we're going to do it was a responsive for our first section which contains two phones which is called two phones desktop and we're gonna turn it off on mobile we're gonna switch hide on mobile on like that now we're gonna do the same with this section which contains our third phone we are also going to hide it on the mobile devices so once you open this page on the mobile device you're gonna be able to see this section alright it's hidden on mobile and this one is hidden on mobile as well now we're gonna proceed to you these two sections first one going to responsive hide on desktop and hide on tablet now next one also hide it on desktop and hiding it on tablet so once we ve our page in desktop mode or in tablet mode this to two phones desktop and third phone desktop gonna be visible and once we view this page on the mobile device these two are gonna be visible and as you see it's not flying like crazy and we gotta adjust the speed of the movement of this widget and I figured that four will be just the value that we need so it's gonna slide in perfectly also let's work on these two phones for now and the value for the speed it worked for me was 2 and the same for the other phone so let's test it out and now I'm gonna scroll down and see how our effect works alright as for me it works just fine this speed is alright the animation starts at the right point and ends at the right point as well and this is pretty much the effect that I was going for and we have found a way to recreate it even on mobile devices because in our original reference this effect also works on mobile and now as for the tablet devices let's test it out and I didn't change any settings so now it works with the same settings that we've set for the desktop device and it looks pretty fine to me I don't see any problem with that so I would leave it as it is and this is pretty much it for this tutorial now you know how to create a similar animation for your own website for your own maybe app presentation for your own maybe you want to present your UX UI portfolio for mobile apps something like that this is where you could utilize this technique by the way the design that you see on this page is actually a wordpress theme for alimentar that you can get on tampered monster.com which is a marketplace where you can find a ton of elements or templates Elementor themes and elements or plugins at affordable prices and all of them are supported 24/7 so if you want to add some handy shortcuts like WordPress themes templates or plugins to your workflow consider going to template mass comm and check in our products out and as I mentioned at the beginning of the video it's not only themes plugins and samplers that we sell on template monster.com it's also product mock-ups illustrations graphics presentation templates such as keynotes Google slides powerpoints and so on we could go on and on listing the products that are available at template master marketplace so you go and check them out yourself since the phones that you could see during this entire video we're created with the help of the mock-ups that you can find at template monster calm and which are linked in the description under this video so I really hope that this video was useful to you and you learned something new and you can apply some of the techniques you saw in this video in your own work in the future thank you so much if you liked the video subscribe to our Channel and leave us a like

Channel: TemplateMonster

Views: 67,444

Keywords: elementor animation, elementor motion effects, elementor motion effects tutorial, elementor pro, elementor pro motion effects, elementor pro tutorial, elementor tutorial, flying mobile phone effect, flying phone, horizontal scrolling, how to use elementor scrolling effect, motion effects, motion effects elementor pro, motion effects in elementor, scrolling effects elementor, template monster, templatemonster8, vertical scroll elementor, wordpress motion effects

Id: bx4V2pS1AFs

Length: 28min 31sec (1711 seconds)

Published: Fri Nov 22 2019