Build a Horizontal Scroll Website | Vev No Code Builds

cool i think we can go ahead and get started um i think today i mean if we go the full hour i'll be surprised um horizontal scrolling might sound like a really hard thing to do nice thing is in vev it's actually pretty simple um so what i want to do first is i kind of want to go over just like we did last time the new york times piece like what we're building today and why we're building it um and that kind of starts all from inspiration so you guys saw that in essentially our um in social and like on discord we were really inspired by mailchimp's uh latest annual report from 2020. so we're kind of doing this like weird um like retake on it so you'll see a lot of stats that we kind of emailed out in our vav newsletter about our 2020 stats and we're kind of just taking that and kind of using the mailchimp um cool like annual report horizontal scroll so what i'll do first is i'll just take you guys through some of that and like what's happening so i don't think the animations are going to be perfect in this um but if you guys haven't seen this this is mailchimp's 2020 annual report they do some really great annual reports they're known for it their last one was amazing this one is amazing um and the cool thing with this is it's all horizontal scroll and it's this kind of like wonderland of things happening so um you have this character that's following around the screen that's in a fixed position and just having this narrative unfold with all these really interesting stats kind of kind of flowing through while you do it now as you can imagine this was pretty intensive in terms of like the design overall so you can see there's a lot happening here and i kind of want to break down how they did it and then i'll kind of show you how we're kind of accomplishing it in vev but really if you guys you know inspector's gonna be your best friend so you know if you kind of look around the screen and if you just inspect you can kind of uh break apart the layers you'll see these storyboard divs and things like that kind of come out and you'll see these assets so i already did a little detective work and i was looking at kind of the assets they had so they had a a background and a foreground and this is this is a ton of work i don't think we're gonna do anything like this today but it's interesting to see how somebody else take uh does it and then see how we can visually build it excuse me so this is the background for the mailchimp piece and what we're seeing here is it's kind of just broken up uh and really what they're doing is they're just doing some really creative work with divs and then adding this foreground to it and you're traveling through this space which is really cool just two layers on top of each other essentially and that lends to this very nice fluid horizontal scroll piece now there's like other ones out there we've all seen and i highly recommend going on awards if you're looking for inspiration it's i mean this is the main place i go um and i just typed in horizontal uh for instance and so we're seeing a lot of different takes on it and one of my personal favorite takes is this canals piece and it's an amazing piece i absolutely love it i'm not gonna i'm actually not gonna open it up because it might break the stream it might be a little bit too intensive for my computer because of all the other things i have going on but there was about a time when i was first learning vev where i just wanted to see if i could recreate it and so this was like my take on it this was my original horizontal scrolling piece uh and i i cannot say it enough i just wanted to say a big shout out to vic he really was the guy that uh made this happen he was the first person to put an mvp of the horizontal scroll out there and then just further refined it from there so this is again this is sort of the horizontal scroll piece for canals and this is looking at canals in amsterdam and like a whole overview and you can see this lens well to if you're thinking about doing visual storytelling or an editorial piece or something like that so again the animations are coming crazy fluid just because my computer's having a hard time so yeah this was all done visually it was pretty cool and you can kind of see all the way through so we're gonna start it's uh really simple uh vic i cannot say enough like how simple this is uh but we're just gonna type in horizontal scroll and so you can put it under section or just in popular and we're just going to take it and we're going to add the section and now what we have is basically a div that scrolls horizontally of course with one block or one section it's not going to do it this is because you only have one so we're going to copy and paste this a few times all right so now there is one interesting note like we're always improving the product as you know i would say if you have any glitches or anything of this at this stage um for instance if you notice when you preview it's just it's this might be easier so i'll change the background so you can see yeah i'll do that way so you'll see like this is still scrolling vertical all you need to do to fix that is basically reload your your canvas then once you do that it'll scroll horizontal great so a few things still apply and i'll kind of just start building our scene when we get into it so i have my color saved here and i'm just going to add them to my canvas again this is just the foundational work we all know and all love because it's super easy in veve i'm just going to start saving my colors or my swatches and in a further i think in another tutorial we'll go through how to create a design system in vev we're really just scratching the surface there's so much you can do you can change your whole palette colors you can create shared styles you can even do main components if you're really building out a full website but for now we'll just kind of do it the the easy way at least um so go ahead and make that that baby blue we're gonna make this this green i'm gonna make this one that sort of like orangish color all right we're going to add text box i think the text i had in here was a rather chaotic look back uh on 2020. and again we're going to make that h1 and we're going to start adding our fonts so for this project i just explored really just to be honest there's some great websites out there that show you good font pairings um but i just kind of looked around here inside the platform until i found something that worked so found um i really loved dm serif display for headings and for our body was dm serif text so go ahead and do that and just to give it a little bit of character we will underline chaotic because that is an understatement um so we're gonna up this i believe i had 85 and i wanted it at one i wanted nice little nice okay so let's start getting some assets in there so what i mean by that is um a really cool function of f2 is our lottie animation so what i'm gonna do i might do that over again but if you just search the add menu for lottie you'll find this and what you want to do is drag the element onto your canvas and then you're going to get an input so this might be a little bit of uh advanced sorry i'm gonna take a drink of water so this might be a little bit advanced but um lottie animations basically what they are uh airbnb wanted to have a better way to do gist because they were just the file size was just crazy and they really wanted longer more uh clean crisp so the aspect ratio it kind of stays intact so they developed what's called body animations and if you know after effects you can download a plug-in which will kind of take that and create a lottie there's also marketplaces that you can find a lot a lot of free lottie animations and things like that there's also premium packs that you can purchase online or you can create your own so what we did is we went to uia net we got a few of those lotting animations so that's what i'm gonna be working with today so i'm gonna open up my file here that i have everything take it through so you guys can kind of see which ones they are these are this is a very eclectic very interesting mix i believe the one i wanted to start with was management oddly enough yep great so you're gonna get uh three files in here and i know this is kind of hard to see but you're gonna get the mp4 file you can use videos but just be really careful if you use a ton of videos it's just going to really affect the page speed um lottie is is way better it's so much of a smaller file size like you're looking at 2.7 megabytes compared to 132 kilobytes like there you can't even argue with that so that makes it easy because all i need to do now is i'm going to take this over here and i'm just going to drop this file right here nice and we have our cool-looking rabbit guy with sunglasses i have no idea um and we're just gonna admit we're just gonna mess with the sizing in here a little bit nice and i'm actually going to decrease the width on that and we have the start of our horizontal scrolling piece so a few things with lottie just because i do want to cover this as well because i feel like a lot of you who are using lottie already you probably know this but if you are not i highly recommend it's a an awesome way to really enhance any visual piece or any type of content you're trying to create so vev has a few fields in here that you can you can edit so for instance play animation when visible that's just like it is now when you load the page it's already there animation on hover on click and scroll let us do our second scene we're going to take our opening message that we're just going to take what tina had written i'm going to copy this text box text box and bring it down here copy and paste the message again if you have a google doc you can just do that make sure to get rid of line break um i'm going to change my text to dm serif i'm gonna go 22 i think 1.4 is perfect i'm actually going to change this to white great and you know there's two ways of just doing this you can either copy and paste the elements you're using and kind of just add the other ones that you want or you can go to the add menu and do it that way i'm i'm a big fan of copy and paste so this one's going to be different and we're going to do i like the browse one for this one yeah kind of a dog looking out into his browser window nice all right so i want to cover one thing with horizontal scroll and that's really positioning so you'll anyone who's worked in web before you'll kind of see that we have the the gutter lines we'd like to call them or the safety lines and it's just how the browser kind of deals with responsiveness and so the thing with horizontal scroll though is you have a little bit more room to play you can be a little bit more creative um so i usually kind of say like i'm not going to follow these gutter lines anymore i'm going to kind of just do my own thing and you do want to be careful you do want to make sure in the final piece you qa and it works but for instance if i kind of sneak this a little bit over here so let's see like kind of go over there i'll publish this i also have a terrible habit of just publishing to see my pieces rather than in preview which i know the team probably hates me for so you can kind of see it kind of bleeds over there a little bit exactly kind of where i want it to be and i can even have it sit if i just kind of go over here i should just preview from now on i can actually get closer and closer so this is what i'm saying is like kind of experimenting um with everything so kind of mess around with the browser window but you can get it yeah there we go so you can get things to sit on different sections again it's not perfect visual building is always sort of a trial and error type thing but it is really cool that you can achieve this effect with absolutely no code so i'm gonna bring this guy back over here and we're gonna continue building out our scene we have our welcome message uh by tina and now we're going to start getting into our stats so i'm going to take this one again i'm going to come into here and i just want to highlight everyone this one was astonishing it was an awesome stat to read we had over uh 14 000 new projects in the platform this year that was really awesome to hear you guys have been truly busy i'm going to take this and we're going to add another lottie animation and i think we went with oh man which one did we go which one to go with i think it was uh brand because it was yeah all right nice and this one i'm gonna make real big make it a nice little scene and again just make sure you know you guys know this it's all layer based so if you need to switch out your layers just go ahead and do that and you can kind of have that sit right on top of the the bust the head um great so let's go back here and republish nice okay so just sorry showing you what we already have here i mean that took us what i i mean 10 minutes maybe like that could take you three minutes if i'm being honest that's kind of crazy and again like the mailchimp piece it had a lot more going on don't get me wrong um but you can achieve a similar thing you can actually if you have if you put in the design work really at the end of the day it's just creating those backgrounds and foregrounds and those elements and then taking the layers out and kind of rebuilding it in veve or just building in bev from the get-go all right so let's see here we have over 14 000 new projects so i think the next one i want to do something a little bit different i want to do something maybe a little bit a little bit more out there so we're going to get rid of a lot of animation and what i'm envisioning in my head is i want large text kind of scrolling through the screen um as you pass it so i really want to make this like 2 000. and then i wanna i wanna up this to oh man one two hundred maybe yeah let's go 200 even bigger kind of do this to 2500 yeah so again this is what i mean by trial and error you're going to i'm going to publish this i'm going to preview it i'm going to see how it looks and kind of what it's doing with the horizontal scroll because there's going to be a lot of like nitpicking i'm gonna have to do here so this would be i think what i said in it was what was made in feb this year question mark and just upping the width again and i feel bad for vic right now because this is probably not how we intended his horizontal section to be used but uh our scrolling section to be used but you know you make it i'm gonna try to break it so let's go through what this does nice that's exactly what i wanted so as you can see you're not getting the full effect it stops right there just like a brick wall just stops so what i'll do is i'll add another section copy and paste that section again oops get rid of this text and so now we just have this blank same background color but blank section so let's see what that did let's see how that's what looking oh no it doesn't do what i wanted to do i might have to come down on uh on my text size and on my width unfortunately so yeah this is one of those things like i said again we still have to be considerate of the safety area our team obviously they want the piece to be responsive they don't want it to be breaking or not working um so i try to be a little bit more um creative or trying to be a little bit more playful with that oh okay um well vic says i need to reload the canvas so let's see if he's right oh you sir are correct that works exactly like i wanted look at that beautiful love that and that's just like one tip to be a little bit more creative with your setup you don't have to just do scene after scene after seeing you can kind of use sections to kind of um i wouldn't say my guy or something together because you're kind of you're kind of doing it but it's cool that uh you can kind of accomplish that stuff so and what i wanted to achieve here um this is going to be the second part to this is i wanted to have things kind of float through space not just the text but also other things so i think in the last piece what i did was i made a pseudo browser window and so i'll show you just how to do that again you can do this in any design platform or design tool you're currently using or you can do it in scratch and bev so i like to use if i'm if i'm doing shapes or something like that i like to use um a frame so we have other shape tools rectangle we have circles all that kind of stuff but i kind of like just using a frame i like to add a fill to it we'll do a nice little kind of like an off-white um and how do you make a browser window well pretty simple um i am going to make this 400 this is gonna be 30 yeah and again just saying you can kind of see what i'm already doing and i'll zoom in for everybody um and i guess i'm in a tutorial right now on how to deal with shapes so let me do a quick tutorial on how to deal with shapes um but i what i want to do here is i i want to create a border radius i wanted to have that sort of um not material design look but somewhat like that so i'm going to go to border radius for this frame i'm going to unlock these so if you click the lock it applies to everything and as i come out you can see i'm getting those those little areas where i don't want so i'm going to go back into border radius i'm going to click unlock and i'm going to add 0 and 0 here so now what happens with that again i'm just going to zoom in way way way far is i'm getting the border radius on the bottom but not on the top because i still want this to be like the tab window so i'm gonna do that i'm gonna do the same thing but only on the top this time so unlock five and five for me five or ten tends to be the perfect um perfect number great we're getting like a little bit of space there and i think i just come down to pixel and for this one i'm going to make it a dark gray just like that that is perfect and now i can add my circles so there's two ways to add circles you can use the actual element here and that gives you your circles another way to do it is to take a frame go here and add a border radius change from pixel to percentage and i think it's 50 or 100 and just make sure it's the same width and height and you get the same effect a circle um i would probably just use a circle but uh that's one way of doing it this is great for uh put it adding avatars sorry another drink of water this is great for adding avatar so say you have a team page and you want those uh avatar images to be a circular photo you would you just take an image then and you apply the same border radius and boom it's a circle all right so now we have our three dots which is just looks like a browser window i absolutely love this function because it makes my life so much easier i'm going to take these i am going to go up to here and say distribute horizontally and it's just going to fix it for me i'm also going to make them all the same width so 1010 and try it one more time and boom i mean i love that okay so from here we have our uh browser window essentially so let me see here we have all of this and so all of these um all of these what is what is at least a frame with a decent border radius in a dial some some uh design humor there for you so what you're going to do is you're going to take all of these in the layer panel on the left hand side and you're going to group them and just so you keep them all in the same place and you just basically uh shift click all of them and apple g and now we have a frame that's just a group of grouping of everything so you can see if we go down you have all of these groupings all right so now we have our browser window and i want a title in there so i'm gonna steal our paragraph from back up here again if you're if you're doing this as like a main project and really taking it to be a fully published piece define all your headings to find out your body text earlier on it's going to save you a ton of time so i'm going to say in this one oops let's see here uh what's this stat i'm just going to keep my text there oh sorry this is like what we what was made this year completely so what was made this year we had oh man i need to look back at the numbers but it was like over i mean it was crazy like i mean let's say 8 000 uh visual stories meaning like articles and um for publications and editorial and like the new york times scrolling telling piece that you guys saw last week um it's crazy a lot of people love our platform for that make that black and i'm just gonna mess with the so here's a small other pro tip of the day um actually if you take this text put it into the frame now everything is grouped within that uh within that width so if you just go back up to here and click on i think a line line horizontal um you should be able to do that and then if you want to get really tricky with it you can go to percentages and you know you can have this be 60 align vertical and in there i want this to be a little bit bigger i want this to be like 32 and same thing i'm gonna change it back to pixels i'm gonna go 300 pixels and there we go nice and now we have sort of these browser windows so what i'll do is i'll duplicate these kind of bring them down a little bit kind of put one over here put one over here oh that is so nice who is that magical collaborator in there with me dropping these buttons in there all right let's let's do that let's to go in our frame again go into here let's use these let's not use these gray old buttons anymore so that's really cool thing too is that you can have multiple people in a project and people helping you out along the way oh if you origin middle on the text as well that is a really really good good shout so one of the things too is and we'll go over this as well in a in a future tutorial i think but if you see how the origin is coming here on the left hand side and we've had a lot of questions on this we'll make sure to cover way more in depth um but if you're creating a frame like this like a smaller component within the within the section what you can actually do is you can you can click on the origin center here and you can kind of see there's not the line following me but you can you can kind of see it so it's it's coming from that center line now and that just makes it the responsiveness easier and that's great for things like menu items it's great for things really any element just be able to assign your origins you do have to play around with a little bit so just for time i'm just gonna i'm gonna add the color buttons to just that frame thank you for whoever dropped this in for me and let's see what else so we have i'm going to take this one again copy and paste keep going oops i think i messed that one up by accident if you do mess up apple z is your friend and let's see what that looks like i want to see just because vic wore me already i'm going to refresh my canvas and check it out all right so we have this and now we have this sort of like scrolling section that is really cool i love that it's definitely the small things it's definitely um man just think about how you had if you had to do that with code not only are you doing a horizontal section you're having different elements kind of kind of expand past the 100 width mark that's so cool that you can just do that visually all right put that up there i got some more frames here cool so the one thing is we need to know where it ends though so i'm going to add another section i'm going to copy and paste this and i'm going to add this to be a different color i'm going to put this back to the baby blue i'm also going to zoom back in so you guys can see everything all right so let's start from the top we got that what was made in veg this year we just made that section so you can see it kind of so it crosses over around that mark so to be on the safe side oh i messed up actually i made the baby i made the wrong section like baby blue there we go and then this will be blue and then we're gonna go here we're gonna see what's going on and there we go so we get we get it to end right around here i might add some more little frames and the way you do that is you actually kind of come down here into this empty section copy and paste a frame and again you just want to see like where it is because you'll notice like the text is the text will be here in the center you just don't see it now because of the editor so for refreshing the canvas cool so we have some little bit of things to fix up here and that just means i need to move this one again always be careful of those safety lines so i'm gonna move this over here more and then [Music] trial and error yeah that's perfect it's also cool because i haven't really seen that done in a piece before um seeing elements of it but it's cool you can kind of just create on the fly and you find out that's pretty original at the end of the day all right so let's keep going um i think where are we at with time got about 20 more minutes so we can do some more stats this was a really cool stat i'm gonna come back here i'm gonna grab this i'm actually just gonna grab this entire section cool we'll go uh back to baby blue for this and this one well first i'm gonna choose what animation we want and i think i want the party one maybe not maybe that one yeah let's do the practice one so i'm going to come in back in here i'm going to change my lottie animation again just drop the file in there and now we got this guy running because what did you guys do with this year um it was over a hundred well let's do this let's have fun with the copy 100 000 um how do we say this clicks on the publish button what we'll do is we'll kind of make a different little layout so we'll kind of place this guy up here maybe make them a little bit smaller i'm gonna place this down here yeah so what that means is that you guys clicked on literally this button over a hundred thousand times now thankfully i'm not counted in the data so um the way i do projects where i keep on clicking it uh wasn't counted uh but if you guys do this you know this is really cool to see whether it was project updates or it was um i mean just previewing work or whatever it was really cool to see that one button got so many clicks so go ahead and publish that again we'll take it from the top real quick just to see what everything's looking like oh wait to load there we go keep going keep scrolling you guys saw this already a ton and now we're in this new section yeah that's pretty crazy great so i think we i mean really the rest of the stream will just be me copying basing so i don't really want to continue that way i think what might be a little bit better is just to stop and and talk to you guys uh how a horizontal scroll can really add to your stories there's a few key tricks of the trade i would consider if you're if you want to do a horizontal scroll uh story there's a few things you should take into consideration one is sort of the design and the assets of it it's really highly uh reliant on what you're working with just like really any visual story piece but i would say horizontal scroll even more so because you're really designing it around scenes rather than anything else so i mean i'll go back to kind of what we're doing yeah so we can kind of see like each block and you know how to do this we i i kind of divided the sections up into different colors each kind of like color block is its own little scene that lends well to what we're doing here with an annual report but if you're doing something more you know you can there's a thousand and one different ways you could use this format if we're looking back at uh mailchimp let's go look at the piece a little bit more oh you know what maybe one last challenge is to show you guys how to get this little guy that that might be cool pretty cool um it is you know what i'll come back to this and i'll show you how they explored it but i let's let's do a challenge how do we get this guy uh how can we make a fixed character on vev travel through our screen i think we can and we can do it pretty easily if someone in chat knows what i'm about to do let me know if basically the challenge is how do i get an element on the canvas to stay with me traveling all the way through the horizontal scroll page if you have any ideas go ahead and chat and let me know so i'm actually going to take another lottie animation and i had prep for this because i was considering doing it now this and this illustration is not in line with anything else we saw at all um but it's kind of cool to see so i just wanted a guy walking like this all right so what i'm gonna do very simply is i'm going to make i'm going to pin this person to the page i'm going to go up here and click on pin position and what you're going to see is we have page content and the minute i did that it automatically went to ping content and what that means is that that stays absolutely on the page oh shoot it good yeah actually really good uh sticky position sticky position may work as well what else other people say if you want to if you want it to walk across then maybe add animation add-on to fixed or stick to the element oh interesting some people other people got some maybe sticky position is the way to go or pin uh well let's try it out let's see what happens so that was a really good guess a sticky position is used a ton and you can a lot of that is used for um regular scrolling websites it's weird to say that horizontal scrolling regular vertice vertical scroll uh but that's because as you scroll down the page you kind of want things to follow you and then to stop following you kind of this we want it to stay with us um you know i'll just i'll reach my canvas and preview it so let's see what this did we got this guy and that is pretty cool that just makes it a little bit more immersive that i think that's really really cool that you can just it's like you're the person traveling this space um yeah i don't i don't love how the illustration is completely different but we're working with what we got right now so let's see we'll run chat i would rather pin sticky position lets you stick from x to y but we are moving horizontal that's a yeah it's i think sticky position would have worked um if we're kind of also recreating this maybe on a regular section nice all right so that is cool we just got that our little character now i do want to say we take in mind we're not coding none of this was there was no code being done um and there's some things in the mailchimp you can already see uh there's some things kind of popping up that we can't really do so if i scroll forwards he goes forwards if i scroll backwards he goes backwards um that comes to mind to me accomplish this i think in our piece the person just scrolls there we go just scrolls back and forth like this uh so that's another challenge is somebody if somebody in chat or somebody building out there can maybe there's maybe an animation tool or something like that like you would have to show two different versions i don't know um but if that's a challenge if you guys can do it show us it in the discord um great so there's some other things you guys can see like we have narrating throughout yeah to make not the character stop walking but to have the character walk backwards with you and i think i don't know to me that's two different one animation of the person walking forward and then and this is all done via scroll and that's where i think it's a little bit tough so is it a show hide thing or is it a um [Music] it's kind of breaking my brain right now i'm not exactly sure how we accomplished that yeah that would be so like flipping the animation would work yeah we want to try it we want to try to do this with no code we want to try i mean the cool thing with vev is if you want to do something like that you can get a developer friend or whoever is on your team just to help you with that one thing because you've done 90 of it you don't need them to do the environment and the whole horizontal scroll you just need them to do that one thing which is obviously that saves so much time um so we've got about 10 more minutes but i do want to i do want to show you because one of the cool things is if you're looking at it through this lens you're having a person walk through space through the horizontal scroll you're having them narrate the piece so they're obviously kind of talking up through these uh little pop-ups and you can actually do that so if you want um that might actually be a challenge too if you want him to speak what you can do is you can have things fade in so it's kind of annoying now because this guy is just gonna chill here as we as we kind of edit our piece so i'm actually gonna go to ping content and just toggle him off while i edit but i'll toggle back i'll toggle toggle him back on so so here's a good example so if i want this to animate all i have to do is go to my animation tool and again i apologize this might be an advanced function maybe not but all you have to do is go to the add menu add an animation and we're just going to do load animation and load we're gonna go slide in oh no we won't slide in from left we're gonna say left but we're gonna make it right so i think um instead of negative 300 percent we're actually going to go i think 20. yeah so sorry you guys can't see what i'm doing so if i go 20 it goes from right if i go negative 20 it goes from left so i'll just do 20. and 0.6 is great i like to add a little bit of delay because i like the animation to happen when you kind of settle in a little bit not directly right when that section um kind of goes in so again i just added one animation right if you guys don't know this trick definitely learn it i love it what does this do it duplicates your animation or copies your animation i'm going to go to which frame was that i'm just going to move this frame up so i can keep this organized i'm going to go to all these other frames that i have and i'm going to shift select and i'm just going to click on this paste animation add-on and that you can see just gave me all the same animations on all those frames i have some other ones down here i believe yeah i got these two i'm going to duplicate there nice so i'm going to refresh let's go here nice and now we have this just animate in just to give it that extra extra little something i will say i'm a huge fan of micro interactions i really think they make or break a website i think those little tiny interactions that are so subtle that you don't particularly notice otherwise known as maybe interaction design those are the ones that really count at the end of the day i absolutely love that and that's why i i mean vav just makes it so easy it's just like you can just do it with the animation tool all right i know right yeah it uh man that when i found that one out i was so happy that one and i think the the two that i most use most frequently um is so the the paste animation tool is one of the ones i use most frequently and then the align vertical line horizontal if i'm doing something like that browser window it just saves a ton of time alright guys well i'm not going to take any more time we kind of went over the hour mark but i appreciate you guys sitting with me and again learning horizontal uh scrolling uh it's been really fun we'll share everything oh thank you secret collaborate collaborator for making my visible guy but we'll share this on youtube so you guys can go through at your own pace and definitely definitely share your projects on discord we'd love to see them so all right cheers guys

Channel: Vev

Views: 2,551

Keywords:

Id: 3kHn77HTgHw

Length: 47min 42sec (2862 seconds)

Published: Fri Jan 15 2021