Image Sequence Player Widget for Elementor

today we're going to look at the latest unlimited elements uh custom widget that we have up on elements library it's called the image sequence player and what it does is that it allows you to build these type of image sequence effect that gets drawn on the screen while the user scrolls so something that is used a lot on apple website there are other sites that makes use of it it's a pretty cool and useful when you want to showcase a product or describe the dm size of a product or the usage of a product etc etc so the widget itself is built with the widget creator from unlimited elements for elementor so in order to use the widget you will need to you install unlimited elements before so once you're you install unlimited elements for elementor uh and you go to the widget tab um when you download the widget from the link on the video description uh you can import it through here uh you just drag and drop and import the widget and then you would see the widget in question here and just like all the other widgets from unlimited elements you have access to the code uh that you can change the attributes and you can add your own if you like etc etc so from a user's perspective uh here i have a simple page with uh three section i believe yep three sections with the middle section being empty for now so just like for motion effect when you have a lot of elements that you want to show uh you need to give a adequate height to your section in order to have enough uh i'm gonna say scrolling room uh within that section so the widget itself is called image sequence so for sequence so at first you're not going to see anything because there's no there aren't any default asset included within the widget but as far as the settings goes it's uh split up into three sections uh so one section for each device and all sections are the share the same uh settings or attributes so i'm gonna go see how we can set up this now an image sequence is essentially a video that is uh split up where each frame becomes a separate image so if you have a video with 30 frames and you generate that's i don't know five seconds long for example and you generate an image sequence in adobe premiere or vlc player or online generator um if you have 30 frames and the video is five seconds long and you'll end up with an image sequence of a hundred and fifty images since uh thirty times five will be equals hundred and fifty so each frame in the video becomes a separate image and what the widget does is that when you scroll it will sequentially draw each of the frames in the sequence so the widget uh the first setting that we have in the widget is the folder url and this is basically the location of your image sequencing question uh in this case in this local installation i have a folder called airpods under the uploads folder and then within the airbus folder i have a folder for each device site so we are going to just give it the url in question and this url the the files they do not need to be on the local host uh as long as it's accessible with a url they can be pretty much anywhere amazon is free bucket cdn uh or what have you now the next setting is the file name prefix pattern and this is essentially when he generates an image sequence and like adobe premiere for example you get the sequence of numbers and all vlc player 2 whatever you use you're going to end up with a file name unless you specify anything else uh in order to have a prefix or whatever the file name will be basically a certain number of digits and in this case we have four digits in every file name so in here by default it's three we're gonna put four uh the next setting is the image extension uh self-explanatory in this case we have the same as the default that is jpeg number of images we have 148 images in this example and this setting here needs to have total number of images minus one so in this case 147 the next section is the canvas dimension and this setting needs to have the same dimension as the images themselves so in our example we have 1158 by 770. so now i should already be seeing the canvas but i'm not so i think i made a mistake somewhere uh yeah it's airpods not ports um let's see yeah all right so we can already see the image sequence and when we scroll it's already playing as expected all right so the next settings that we have deal with the animation starts end of the animation location the pinning location of the canvas elements and before we start changing these values in order to help visualize what we're doing we can use these markers so we can also give it a marker id so that we can know which marker we're looking at on the screen so i'm going to call this one desktop and if i say i click the show markers we start having these markers here that can help us visualize what's happening so by default the pinning location and the stars of the animation is at zero percent so this is zero percent means the top of the screen and the end location is also at zero percent you can't see here before because it's overlapped but uh there's uh the stars is always green and the end is red and so what happens by default is that when the starts the top of the canvas element gets to the top of the screen it will be fixed and then when we scroll the animation plays and at the end of the animation when this and desktop marker here reaches the top of the screen the animation will end and the elements will be unfixed and the normal scrolling uh will take effect so if you see if we start scrolling once we get to the top the element is fixed to the screen and when this marker reaches the top of the screen uh the normal scroll starts working again and so in this section we can change uh the values of these scroller start desktop and this was essentially allows us is uh dictate where at which points in the screen we want the element to be fixed uh for the duration of the animation which also means uh that's the point where the animation will start so in this case uh we probably want to fix it at this position so maybe something like 10 percent yeah so this is something that you will notice with the markers uh it's not a bug by default uh it doesn't keep track of the markers because it's something you only use in dev they don't want to add more code for nothing uh just to handle this uh it's only used during developments so they don't keep track of the markers it just redraws new markers every time uh it can be a bit annoying in this case but it's not really a problem you just refresh and you will only have the current marker drawn on the screen so as you can see we changed the location of the animation start location to 10 so it's down here so this is 10 percent from the top the animation end location is still at zero percent so the scroller and disk up is at the top of the screen and so now when we scroll down instead of the canvas being pinned to the top of the screen it will be pinned that's scroller start desktop location at 10 from the top and so if we scroll you see that now it has been here the animation place and again when n disks up reaches the end normal scrolling behavior checks kicks in again and this is also something that we can change again we will have to refresh just to have a cleaner look but this is the 30 from the top so if we refresh we just to get a cleaner look and now what will happen is again it will start at 10 we scroll and now instead of ending at the top it will end one the animation will end the normal scroll uh will kick in again once we reach this point here now and so yeah the last setting is the what's called the scrub and this is basically a sort of delay between the animation and the scrolling uh so it can help you smooth the animation relative to to the scrolling depending on uh what image sequence you have and the scrolling speed that you have if you have changed it from the default one by default the scrub is at 0.5 so that means there is a 5 millisecond delay between the scroll and the uh and the animation itself uh and you can change it but whatever value the right value will depend on your specific situation and the effect that you want but as you can see the animation plays with the delay of exactly two seconds right now uh from the scroll so you can see that it seals plays even though the scroll already ended and so like i said at first uh all the other tabs uh the all three they shared the same exact uh settings and the reason for this is uh you don't wanna have you don't want to reuse and just resize this canvas with the same asset files that you have for this up on other devices because the clients will still end up downloading the heavy files those are meant for the desktop if we look at for example let's see if we look at the apple site uh you can see that this is the sequence of the first canvas and in the tooltip you can see that it's coming from a folder called sequence large so this is for the large devices and if we look at the same um well the first the dimension the size you can see here for the desktop is this and if we look at the uh yeah we need to restart to refresh if we look at the mobile version you will see that it's coming from a different directory in this case sql small and we look at the files they have smaller dimension and a smaller file size and this is the way that you're supposed to be doing that basically so that's why i have these three folders here that's why the widget has three sections so if i look at the tablet right now let me get rid of those markers yeah you need to refresh so if we look at the tablet right now you see that it's still using the desktop cables by default because we haven't defined anything on the tablet so just gonna go ahead and copy paste the location of the folder and change from desktop to tablet the padded is the same it's going to be four extensions stays the same the number of images is the same then we're going to change the canvas width and height in this case we have an image of 800 by 530. and we should already start seeing the canvas yeah there you go so now you can see that we have the right size uh for based on the new image size and again we probably don't want it to be stick to the top in this case so we're going to change the location to say maybe 20 and so in this case it would be staked at 20 off the top and again uh same thing for mobile uh just give it the uh the new location and the prefix is the same uh number of images are the same and then it's just the width and height of the canvas it should be based on the image dimension themselves so in this case 400 by 460 if you look at the mobile up we see that we have the new version and again depending location we probably want to change it to something like maybe 50 and now if we check our site on mobile on tablets so 2015 maybe 20 doesn't matter and when we change to yeah so on desktop tablets and mobile and this is basically what we would be seeing on the front end as well so depending on the device type it will download uh the correct image sizes and draw canvas size with the right uh image with the right dimensions and that's it that's all there is to it really i hope you like it and uh i mean there's a lot of users that you can make of this uh for showing products you can use it for your um you could potentially use it for your uh when you say case studies um for your own agency site for example like here you could have it like for showcasing products uh where you can have some kind of after effects template where you have some some devices where you show the sites of the clients in question uh describe the product that you did uh these texts you just use uh motion effects that come with elements or to show and hide them at specific locations within the scroll and so it could be useful in a lot of scenarios i think all right that's all i wanted to show thank you for your time and hope you like it bye

Channel: Elements Library

Views: 4,032

Keywords: webgl, slider, unlimited elements, elementor, widget, wordpress

Id: mCOn1G6no9M

Length: 20min 21sec (1221 seconds)

Published: Mon Nov 09 2020