How to create Hover Interactions in Editor X using wixAnimation API | Editor X Tutorial

hello everyone so i came across with this beautiful uh menu animation it's like it's not yeah it's basically a menu but it's look like uh the landing page of spot shop or something like this and i thought well this is a very good example to show how to use wix animation api how to use it so let's try to build it so i took a screenshot and we need a plan before we even start to build it on the in the editor so i i already opened a new site but i also open figma and stuff to planning okay so this is the screenshot of the the from the video so we have like a menu here and we have another section that fills the whole screen right and this section is um looks like a section with a grid in it with six rows that display different content so we need a header we have a header and we have our section and we have also a footer we don't need it but let's keep it for now so i also have uh here the canvas so we have something like this so i'm a little bit new with a figma but we need a layout a grid but the grid it should be columns and we have you know what let's go with with five columns because i have only five content pieces so we have getter of one pixels you can see in there you see in the video that we have like a very light uh line here you can see there is a line here between the cells and and we have let's say 60 pixels header it should be 60 and then we have the different row for for the content and the content if we look closely it's look like we have when you hovering so when you hovering like this first cell you can see that when the mouse is in it's reveal a background image and the icon is stay the same with uh you have like a box behind it with color and there is like two screens that once goes up and one goes down so if we divide it to a sec to components it's like we have a main container who should sit like like this i don't know so it fills the whole column and then we have the background image right like this okay we have the background image on top of it how do i make it font okay so we have the the image that it filled the container and then we have two parts of the screens and this is like the static screen that it always on top and it's not going it's not going to to change on hover okay so it's something like this so when wait uh bring to front to front okay so when we have a ring it's doing something like this right just go up just go down okay so let's create uh our first first box and if we build it correctly this is why we're planning in advance so it will be really easy to just duplicate it and then uh work with the animation so it's make our process a lot faster all right so let's start so let's set up we don't need this logo so let's delete it and let's say our header is 50 60 pixels height okay and our body should be 100 of the screen side which is dynamic so we can say 100 view height all right and now we we have what we need let's see we need to add grid to our content section so let's choose custom and we need five columns and one row all right so which is something like this so this columns is equal it's always equal all right so now we need our main container right so like a big container that is fill the whole column so let's add one to quick add we need a container let's drag it inside and let's place it inside the first column and it should be 100 width and 100 height so we can just stretch it and you can see that we have a border here to the container by default and we will not um remove it yet maybe later okay so now we need um we need the background image so let's quick add image and we can drag it inside our container container and the same this is one stretch right all right so let's uh change our image and you see that i already upload uh my icons the brand icons come on what happened just go try again um and the images so let's pick one of the images like speak this one great and you can basically you can decide what is the focal point when the image is responsive you need to make sure that the main content is always where you want it to be so yeah i want the face so it's smartly generated already right so we have our main container and we have our background image and now we need the two screens so let's add uh the first screen it's also a it will be a container but before we will do it i mean i can say that you will be fif a half right so 50 of this container but i i like to work with stretch elements so i just add a grid to this cell to this uh main container so grid of of two rows and one column and i i just fixed the the height of each row so basically they always need to be equal right so we can just say yfr and this one is 144 all right great and now i can drag it inside i will add some background colors so we can see it should be white but for now i will make it let's say pink just for just for us so we can see and now i stretch it and you can see that this is exactly 50 percent and i can just duplicate it and stretch it again but now it's covered uh both rows and we need to fix it by we can just go to grid area and fix it to start or row sec in the second row and end on the third one all right so it looks like this perfect and now we need our logo but we can't add just the logo because you can see that in the video it's like it have like a white background so it need to sit inside its own container so let's add another container and this one will be white in advance and it should be we can decide uh the height of it so you can see that if i will drag it inside so it can it all it it like attached to our container so i can i can do it differently by just you know changing the the positioning here in columns or i can do another one another thing is to replace our container with vector art okay and then it will not attach to it can't attach to a vector out but i will keep this container but basically you can work with a basic shape okay so i said the this container height will be 100 pixels and it should fill the the section the width so it's 100 width and let's just place it correctly so it should be dark to the left side or right side it but or to the center it doesn't matter as long as the upper absolute center so i will remove the docking from top and now you can see his center but it's centered to his own row uh if i select the main container and adjust grid you can see that is perfectly centered but for the first row so i need to make sure that it sits on both rows uh okay i forgot to do something so i need to cut it and i need to paste it inside our main container so this is our main container and this is another method how to pass elements inside specific element so you can control v and you can see that it it now perfectly center because it sits on both row if i change this to the second you can see it now second but only to the first row all right uh so now i can name it so i can understand exactly what each container is used for so this is our log container i will call it logo box and this is the our top screen and this one is the bottom screen and to the main container i will call a colleague it our card so this is this is the card all right and this is of course the image okay so let's change the color again to be white and this is why i didn't do it white in advance because you can see nothing basically so what we need to do now we're missing the brand log the brand logo so let's add we can go to media uploads and you can you can choose a logo let's say this is reebok and i need to paste it to place it inside our brand container so let's make it absolute center and let's give it like 30 pixels maybe it's small 35 all right so let's just reset the image so let's see it correctly all right and now um what i need to do let me check the layers all right so we have our this is our plan we have main container we have the background image two screens and the container does contain the brand logo perfect and now all we need to do is to duplicate this one like four more times all right so i just need to this image is the background color this okay okay i will do something else no you know what let's keep it that way you know yeah i will do something else remember that i struggle to to place this container inside the main container so let's use other practice so instead of make it like 50 each i will go to the main container and adjust the grid and i will add another row in the middle so now you can see that we have like two screw uh two parts for the screen and now this one will be for the the brand container so now i can just drag it inside and now it's you can see that it's on the main container it's it on its own but i will make sure i can stretch it so it will lose the height but you can see that it's stretched on both rows the second one and the third one and we need it to stop to stop on the third one so so now it's it perfectly inside and we can adjust the grid to be always 100 pixel so it's it's like this but i will make it absolute 100 pixels perfect so for some reason our section is bigger than it should be you see that this is the footer but i can see that this one is continuing so something is not quite okay here so if i change this one to be auto now this should this one should be 100 vh right and now let's check it's not fixed yet so we need to make sure that everything is fit correctly so this one is 1fr 1fr and max content this should be 103 pixels okay so what happens here uh the section shouldn't have height on its own and okay now i can see that this container has min height so if i want to remove it i need to unstretch it and then i can make it none and i can bring it back to be stretched perfect and now you can see that it's not going uh up on the footer so now it's perfect it's it perfect so all we need to do is to i will make this one on top of this one okay and i need to duplicate it okay so i can just duplicate and then i stretch it and i fixed the positioning it needs to start from from column two and i will do it again and again so this one should start on third and duplicate again and again all right so all we are missing right now it's the divider it's like the this horizontal lines this light uh vertical line sorry okay so let's add a color uh not color decorative vertical line let's add this one here also this was a mistake okay we have our line and we need to make sure that it's it under the section and not inside one of the cards okay so now let's stretch it and change the styling so it should be one pixel and change the color to something like grayish um let's add new color and let's do something like like this all right so it's very subtle and it should be the positioning should be docking to the left side and it should divide between this both uh between these two columns so it starts on two and on three perfect and now all we need to do is to duplicate it but you will see when i duplicate it it's some reason for some reason you get zero you can see but you can basically or stretch it or dock it from here so let's do both method so if i stretch it and now i am repositioning it to start from three and on four and remove the margin and now it sits correctly so if i duplicate it again i can you can see that it's here it's like one pixel but i can dock it from top and then remove all the margin and position it again four to five yeah 45 go to 5 and let's do it again stretch it move the mountain and five to six and now let's publish the site and let's see the live version how it's how it's look okay so it looks something like this and you can see this is our header and this is our contact section and this is our footer but it's like it's more than 100 vh right we have overflow we will fix it later okay so the second thing we need we need to let's add a line here but i will show you uh some hack how to do this vertical line we can add about uh horizontal line here but it's too complicated because we have so much containers here so let's add a container to our main header and let's stretch it and let's make sure it is on the background so arrange sent to back and now i will remove the border but i will add a shadow from top to bottom with no blur and a solid color and this is the same gray color and now you can see that it should wait it should we need to add like one pixels margin from bottom because basically it's behind this container or we can move it to the front but let's add one pixels from bottom and now you can see that we have a published site you can see it better and you can see that we have this line perfect all right so i forgot something you can see that we have this banner editorial created on historics so we need basically to remove it from our calculation and then we don't have the overflow and also we need to remove the footer so let's do it so on the first thing we need to don't display the folder and now we need to calculate uh two things so first thing is this header this is this header and the second thing is the wix brand so totally it's 110 pixels so i will go to my section and this is a powerful tool you can change uh the absolute height to calculation and then you can choose you can type 100 vh i want you to be a 100 bh but minus the header and the footer and now let's make sure we don't have this one here what happened wait i will bring back for a second the footer and let's select our section and this one should be like nothing so no wait you know what let's keep it like 500 just a second and then we'll play with it later and now if i refresh it oh i forgot about the footer so that's non-display and now you can see that it's i don't have a scroll here okay but for now let's keep the footer here all right so this is our section this is our container so let's preview it from here [Music] and all right so this is our section oh let's get zeroed from somewhere all right and let's add so now let's go to the animation okay so we have uh we need a toggle right we need to open it so let's just add a button that says menu all right let's dock it to the left side and it will be a hundred percent and you know that let's change the styling no border and let's add shadow from left to right and same color as our dividers and no blur alright so it looks like this and on hover only the text will change color to let's say this purple all right perfect so now to the animation part for this one we need okay i just forgot to let's update our our logos so this one should be let's say and to restore the perfect resolution i think we need to click it and let's say you are 20 and always enter and you will be let's say nike all right you see how it easy i mean after i i create uh one layout exactly as i want it to be and now i just need to change the content and let's say this will be a new balance and that's restore it 20 pixels 20 all right and the last one should be adidas all right running restore all right maybe oh it's not okay okay but we forgot to change the images all right so let's do it this is the adidas smart white skype we upload it this way it should look okay i don't know why anyway let's change the image so this this is the image change image and let's pick the adidas this one and new balance this is the image nike should be in this moment right perfect so now we need uh to use velo for the interactions and i guess very soon uh we sneak to editorix needs to come out with a wix interactions so i guess you can do it with no line without any line of code but but till then let's do it so we need to activate dev mode let's activate it all right so i need i just need to replace this new balance icon because it's not good so you know what we have these two i can just make a filter and make it with more contrast and then it's perfect all right so okay let's think what which what what we need to do so basically each time i'm hovering let's publish it so basically each time i'm hovering uh some of the containers it should play the animation right so this is why we create our main container so the hover will apply on on on the hardware one so now i can you can see that this is display all the ids but if i toggle this toggle i see the names that i gave to the to each one of them but i will change the ids so i so i know exactly what i'm doing okay so i will call this one card uh number one i will copy it and paste it here only change the number so this one is the third one and this is the fourth one and this is right so let's create a function for this so what we need to do we need to create a hover effect right so let's create a function let's call it fun function let's call it activate over let's call it cards over over okay so we need to map all our boxes okay so we can say said const box s equals to uh we have box in our box we said card right so card number one and let's copy it make it easier we have five like this right so this is one this is two this is three 4 5 there is an easy way to do it but i want to show you another way to do it okay so i need to say for each one of these boxes when i'm hovering do something right so i can say boxes for each box which you know what uh let's journey to card and this should be cards all right so for each card let's do something so we need to do [Music] so this one it should hold the the right id okay so you can say dollar w card because this is the id on mouse in do something right and and i can duplicate it and say do something let's see this is something right do some thing right so on mouse out do something else all right um so what we want to do we want to we said that this card is on top of this image so we need the top uh the top screen to go up and the the bottom screen to go down so we need to find the id of this card right this is the top this is the button so i know what is the main box and i can see that i i need to talk i need to get the children okay so i can say if if i want to get let's change to our names so if i want to get the top screen it's that is the child of this card but in the position this one is the first one second one third one right but because this is an array so arrays start with zero so this is images zero position one position second position so i can say the dollar w um north let's do it another way i can store it okay so i can say const uh top screen equals two to the card children in position two right and the bottom screen so let's say bottom screen is 0 1 2 3 right and this is why i duplicate after i create work because i know now they all identical all right so what we want to do to the top screen so we need to use wix api anime week's animation timeline so weeks nation timeline api so let's see so the first thing we need to do is we need to import so we can use it so we need this first line so basically we need to import wix animation from wix animation now we can use the timeline and now we need to define our timeline so we can call it directly or we can store it but let's see so we can call week's animation and if we want to add okay this is the add so let's see how it works uh we store our object and then we call timeline add we call the object and we give him like the or the command what to do here is rotate scale duration so we have multiple things we can play with it alright so let's start with declare our timeline so we can set uh wix animation timeline and we want to add animation right so add and the target the target we said this is our object so we want to animate the top screen right so let's copy it here and the animation how it's done it get an object right so let's do it so he needs to get an object and now what we want to do to the first uh container we need to scroll it up right so up is the y position right where i can find it is there is animation and then okay we have rotate scale you can see y vertical pixel target to move the element uh to vertical okay so we need this one and so we can say y and we want to scroll it up okay so let's say just a random big number so let's say 500 pixels go up and the duration let's say a quarter of the second okay so something like this all right and we need another one right we need the bottom line the bottom screen so the bottom screen you go to the different direction you need to go down 500 pixels all right and we need to play it we need to say play alright so when the card is going out we need to do the opposite right so the top screen should go back to z to the zero this is the default position like like it it is now okay so it should go back to zero and let's increase the duration so it's look like a mo slo go back slowly uh okay so let's see if it's working so we need to call this function from the already and now let's preview so this one is working the third three is working and the others is not working we can see that we have like an arrow here but let's see why but it's working without the animation i wonder why okay but so let's see we had lots of error so the animation function called timeline was called with the following invalid option keys durations okay this should this should call duration without s so let's remove it it should be duration and let's fix it and let's do it again so this one is working you can see it's happening in steps okay it's not together but okay well this one is not working so let's find out what um the order is should be correctly or maybe the ideas is not right let's see oh yeah this one is should be four all right so now let's yeah it's working the problem is that the animation is happening one after in the others right it's not together so let's try to fix it so there is something that called offset so offset mean we can see offset mean when animation start in the timeline when no effect is specified the animation and okay so so basically if you know if you not specify the offset so this animation it's like a script okay this line happened first and this one is after but you can add an offset and you said okay you will start if you say zero it's exactly the same time as the first animation but if you said okay let's set you will start 100 milliseconds so basically this animation will start and then after 100 milliseconds so this animation is not finished yet but the second one will start also okay so we need the zeros or they all will start together right so let's try it and you can see that they happening together so let's publish the site and see how it looks on the live site and well this is look amazing right and it's also responsive you see that it's super responsive and we don't have tablet and mobile and i will not do it but it's great okay but you can see that when i'm hovering it you can see that this line is disappear you see this line there the horizontal line between the footer and the header and this this has happened because we didn't set the overflow of the content you can see that when i'm hovering the you don't see it right now but basically this co this container that is go out 500 pixels is actually increase our page okay so to fix that you know what let's add a color to our page i want you to see it our page let's add a pink color okay so now you can see that when i'm hovering you will see exactly where the the top and the bottom screen goes okay you can see that it's right here so to fix that we need to do something very simple we need for each okay there is two method i can set overflow height of overflow hidden to all of the to each container or simply i can select this section because all this content is inside the section and this and here on the overflow content i can say to be hide and then you will see that it's it's gone but you don't see because it's outside of this section so when i'm hovering it now we don't see perfect all right so let's bring it back the page color to be white all right and i will add a background color to the header right so basically we achieve this animation right but i also saw this beautiful sidebar and i want to create it but it should be it's like an extra it's like uh we will do something else you know will not do exactly the way uh exactly the way it is in like the video okay so let's add a side sidebar so for the sidebar i will use um a vertical section you can see here this is a vertical section and i will set it to be like 300 pixels sweep and okay i will add a container inside of it because we need to put some content inside and i remove the border i don't think the border and let's design it a little bit okay so um i will apply i don't need a grid but let's set when we open it we want to display let's say my brand name or we call it like sport shop and it should be centered and let's do something like this it should be smaller maybe too small but and let's set it to be 90 width and 30 pixels from top or maybe 20 pixels all right and now we need like let's create a series of buttons okay so and this one will be a hundred percent and let's apply grid of three columns i just love to play to work with grid and let's play replace here you know what let's delete it and just copy this one copy and paste but i don't need the shadow so let's remove the shadow and let's change the text to be i guess and now uh let's say this one is will be you know what let's make it stretched so it filled the whole column and let's duplicate it stretch it again fix the positioning and duplicate it again and again fix the position all right so let's call it welcome woman this one should be welcome oh man and all right we just forgot to remove the border from the container and adjust the grid and set each one of you will be 50 pixels okay right and now let me okay this one mean height 150 okay i can do with it all right and it should be centered and now this is look huge you know all right let's do it what else we need we need we have like another menu here let's do it so let's use the vertical menu okay so menu vertical menu something like this let's put it here and again one hundred percent why it's so huge obvious thousand all right and let's dock it to the bottom let's set three 30 pixels from bottom white so high oh i know why and let's match the menu and we need some dummy menu so let's manage menu let's duplicate this one and let's say new in oh it's going to be an idea okay new in fashion shows let's encore what it was i forgot already new in fashion shows um question shows and campaign and sell this come on all right the last one is cell of course so set all right so let's remove our home move for menu perfect let's design it a little bit let's make it super light and 14 pixels you know what i like it let's keep it that way uh okay so let's let's see how it looks all right something like this okay i can leave it all right so the second things we need to do is to make it fixed right because it should not take space from our page so on scroll it should be fixed and overlap our next section all right great so i want to delete it i don't need it but let's keep it for a second i will just make this one let's make it black so i can see exactly what i'm doing and the text element created by the editorial let's make it this all right so now we have our side menu and we have our trigger this is the menu here on top and just to make it really nice so let's copy this container and paste it here and let's make it something like let's say 50 and then just grid make it and this should be 100 percent height and stock to the top and absolute center and then let's adjust the grid and you should be max you should be auto all right and now let's see now let's make it smaller this container let's make it fixed and it should be like 500 something like this and now this should be fashion and beauty like the video right e a beauty i think and lifetime we don't need this menu live style right so let's change the design it should be super light and let's make it 40. and let's make it like this so i can copy paste the design exactly from here copy element design and then i have my brush and let's do it again and i want this shadow so let's add a shadow oh i have it already all right great and also for this one and now look at that it's look amazing all right so we have the hover we have this the sidebar and we have the menu which is look very nice and now let's toggle our sidebar so what we need to do we need to start with that we don't want to see the sidebar on when we go inside the page right so we need to say first of all you will be not the container i'm on the container i need the sidebar i need and let's change it i will call it sidebar menu all right great so you will be hidden on load so let's see how it looks like right now so when i reload i don't see the sidebar perfect this is exactly what i want and when i click this menu i want to see the sidebar so we need to create another function for recycle behavior right so let's create a function activate sidebar menu all right let's fix this all right so first of all we need to know what is the element right so it's const sidebar equals to sidebar sidebar menu all right and now we need to toggle it right to to bring it in and out but you can see here that the first positioning is not as we want it to be right so we can do we can make first time animation that's take this sidebar 300 pixels to the left that mean that it will go outside of our site or oh yeah so i said 300 because the width of this sidebar is 300 so let's uh sidebar with equals to 300 cons of course all right cons all right so this one is 300 pixels right and okay so now we can use the wix animation timeline to push it so we need to add an animation sidebar element we need to push it from the x position so x minus how much side by width sidebar right and then we need the duration should be zero right it should be immediately but this is the default so i will not write it so and we need to play it right play so all right so now the sidebar when we go to to the page is hidden and it's minus 300 pixels so the second thing we need to do we need to create an animation that will trigger when when we click the menu okay so we can set const timeline side sidebar timeline equals to wix animation timeline add sidebar sidebar menu and when we click what we what we we want to go to happen we want to take it back to to the original positioning right because because i have a blackout okay because when we start the when we first start we are taking it like -300 so we want to bring it back to zero so x zero and the duration duration should be something like 600 milliseconds or 500 i don't care all right so what we need to do we need to to give this function to specific button right so if we select the menu button and we can call it like menu menu sorry menu button okay so this is our trigger right so let's call it let's store it also as a variable so const cost menu button equals to menu button right so menu button on click uh we need to toggle it alright so sidebar timeline we need to play it right so play right so let's see how if it's working so i click menu and nothing happened oh because i didn't call this function so i need to call it already all right so let's preview it now and when i click it we see the sidebar but because we don't have a background color for the sidebar so let's add a white background so now when i click it you can see that it it's here okay but we also need to push the header and the in this section with the content we need to push it also right because it's now covering our menu you see we don't see the menu button and it's actually uh more nice it's have a beautiful effect okay so we need to get these items okay so let's set const i will call it page section page sections equals two and i can store it uh like this so i can say header and we have als also the seconds the this section the content section so section one right so section one oh i do it do it like this i think i forgot oh this all right so what we want to do we want to to add the sections to go exactly same pixels within this animation so let's edit okay so let's add another animation and let's add the page sections and the x should be 3 uh 300. so basically this is the sidebar width all right so let's see how if it's working so when we click menu you see this is also push but the header is not why the header is not pushing we have some alert i didn't see oh because i call it header one and it have different id so now oh and and also i i saw that the animation is not happening at the same time so if you remember i need to update the offset to zero and now when i click the menu it push everything so the second thing i want to do i want to make it darker you can see that i want to this one to be like darker so i will add opacity to this both sections so i change the x position and i will also add opacity of maybe something like this so let's preview it and when i click you see that now it's it's not full color and i can do even more i can change the page color you can see i can change the page color to be like i said black and now it will be darker so when i click menu it's get darker okay but now we can't close it we only can open it so we need to do it differently a little bit so okay we need to check we need we need the button to to do the same um oh i call it same action okay so basically i need to do do it differently okay so i need another function i will call it function toggle again sidebar all right and i need a section and i need to check if the section is visible or not so basically i need to say if sidebar is visible so i need to close it right so i want to play this animation but i don't have access to this animation because i store it here inside this function it's not a global one so i will do something else i will copy this one and remove the declaration here and i will declare it on the top and now when i call this function i will set the sidebar timeline to this animation and now i can also play it from here okay so i can if the sidebar timeline is visible so i need to you know let's say differently if it's hidden i need to play the the animation right so sidebar timeline play else which mean it's hidden uh it's visible i need to sidebar reverse right and all right let's test it so when i click the menu it's not playing why it's not playing sidebar timeline is read only or what what happened it's read only whites read only oh wait i forgot i need to remove this one and now it should work so now when i click menu it's open when i click back again it's not closing why it's not closing oh because i said hidden it's not hidden it's offset okay i know what is the problem uh remember that we set our sidebar to be hidden on load right so basically when i said uh when i add animation to the to the sidebar it become showing okay so i need to say here i need to say sidebar timeline on when i click it i need to show it first because it became visible but not let's try so sidebar i need i need it to be show and then only after it bit show i need to and then i need to to play the animation sorry all right and same here but here i needs to basically i need to say uh cyber okay cyborg timeline on reverse when you finish to do the reverse on reverse complete i need you to become hidden again so i need to hide you come on all right so let's see if it's work or not so let's preview it so i click the menu i see them sidebar and now it is visible and i click again and nothing happens why so if sidebar is hidden side version then sidebar play else on reverse complete sidebar height because i didn't call it i need to replace the menu button click with this function all right so when i click menu i click again it's close well this is nice am i right [Music] did i miss something let's see how it looks on my site all right so when i click the menu and click again well it's worked perfectly but you know what i like to do i like to to make it to can it can be close it if i click here also but you can see that this is actually a section but i want to if i click it to close this menu but if you remember we already create a loop over all this container contain containers right so basically i can set also close the sidebar if it's open so i can copy this one not let's not copy let's go to the activate cards hover you can see that here we set cards for each card so we are looping here so we can say also card we have mouse in mouse out let's add click so card on click on one click let's check if the if the menu is open close it right so we need the sidebar so this is our sidebar and you can set if or maybe we can just no we we need to play the action only if the sidebar is open so we can't we cannot call this function so if sidebar menu is visible so sidebar timeline reverse and all right so let's publish it and let's see if it's work so now when i click the menu and i click on let's say here let's close it nice i really like it this is look amazing it really does so yeah i encourage you to play with it and do it uh and try to make it and i will attach a link to this uh to this live site and i will also uh maybe create like a pop-up here with a code snippet and screenshot of the layers panel so you can play with it and good luck have fun

Channel: I Love Editor X

Views: 7,682

Keywords: editorx, editor x, Editor x, tutorial, tutorials, wix editor x, wix, how to, timeline, interactions, animation, hover, effect

Id: i9dOYFX1MHw

Length: 81min 23sec (4883 seconds)

Published: Sun Mar 14 2021