You can do that with one line of HTML?!

Key Takeaways

a little while ago I issued a challenge to you guys on taking something I coded up and I wanted to see the fun things you could do with it just playing around with this CSS and I've it's been amazing looking at the results we've effectively had one element to play with you had one span and you could do what you want into it and you guys did amazing things with it you had nice cool spinning fun awesome animations we had some timing functions we had some keyframes there's really creative use of borders of gradients of other things to make some really cool looking stuff to make some actual hamburgers with just one element really really fun really really cool I was really impressed and one of the most fun things about this is seeing how other people approach the same type of problem because you're gonna see there's several people that arose but they all did arrows in different ways and it sort of opens your mind a little bit in the fun and the creativity that CSS opens up to all of us it is one of those problems where there's maybe several different ways to pull off the same thing but it also means we can be creative with what we're doing let's go and see all of this creativity cuz really really it was so much fun for me to look at and go through all of these things that you guys did we have a whole bunch to get through but I was originally going to be grouping these by similarity because there's a there's similar ideas that are used a few times or a few people had similar ideas but then the other issue was a few people submitted more than one and I didn't really know the best way to tackle that so I've just said you know what let's just take this in the order that I put them into my spreadsheet and that's what we have here so this is the first one it is by a team at wrinkle also just really big before before we go any further into this a big apology if I mispronounce your names so if it's a name I'm not familiar with or even if it is when I am familiar with I'm eight I may just mispronounce it so I apologize ahead of time if I do so Tim here made this his his comment was who doesn't want to add a little bit of who doesn't to add a little bit of catch up to their hamburger so when we click that it opens up the hamburger and he's added some ketchup let's just zoom in on that so we can see it i guess i zoomed in too much so there you go and we can see there is a bit of ketchup that is on there if we go and take a look the CSS is used to eat custom property to set for the color of the cat reproduce awesome and he's used a gradient to set the color on there so we have the ketchup color going to 40% and then the dark going to the rest of it and it is a gradient but he's done it in the nice way where you can get a straight line sort of transition between to care to colors just like that so that is a nice fun look at a little thing we can do obviously this one's playing around a little bit more some of them are more like this that are more takes on the hamburger itself you can see it's made to look like a hamburger instead of just being three black lines and some of them take it even more literally than that and other ones do a bit more of you know like a tackle like this one here by RZA can where it's a bit more of the traditional and except he's played a little bit with the animation that's going on or the transition we have there you can see it's a little fun transition that's going back and forth so we come to take a look at the CSS here and I go all the way down he's actually done it with a keyframes which is really really cool so he has the boomerang in list in and he's done another one for the hamburger itself so that's why their animation is a little bit different for each one and then I'm guessing yep here we go when the nav clothes or a nav open is put on there oh so we haven't have closed and it never open I'm he's running it to run the animation forwards he is moving and years running it so here we have a boomerang out and the hamburger the boomerang list out and the boomerang hamburger out and then he has a separate animation for the in so that is nice and fun thank you very much for your submission riza on the next one Raisa Riza I'm guessing it's Russa here we have one by vipin Misha and let's go take a look at it and it's just a nice little so there you can see it's playing with the the animation on there itself just to overextend it and then make it come back just a little bit so it's like it spins so fast and then I think he's changed that little in and out so this is the type of thing you'd actually see on a real site as even the last one was probably a bit of an extreme example but it might be something but this is something you might actually find where we're playing around a little bit with the actual animation actually for all of these the link to them will be down in the description below so there it's a numbered list with all of the ones in the order I've gone so if you do want to check out the code pen itself in more detail because you really like the animation or you want to see how they did it more than what I'm doing in this video well you know you can go and check that out so I do think that is fun it's a nice little way just to keep it almost like a more realistic animation where you can't just stop you know you go a little bit past and you come back a little bit my guess is it was with a cubic Bezier yeah let's go take a look there we go so he's here we can see what he's done is he's taking out the transitions that I did and he changed it to have a cubic Bezier that goes beyond the the finish point so whenever you see a cubic Bezier if you see it the number is beyond one it pretty much means that at one point the the animation would go past the ending point and then have to come back and settle down so it's really related to where the arms are getting pulled to I'm not gonna dive too deep into it in this video but just if you see a number bigger than one it always means that it's doing like going beyond its finish point and then has to settle back down like we can see going on right there so that's what is happening with that next up we have Lassus so here on this one is actually submitted by email you can see he's built this into a hamburger and he's done it without adding any HTML this is all done with just one single span which is so much fun and it won't be the only hamburger entry you can see now actually when we click on that it sort of flattens out and then unflattering that's funny I was looking at it with Chrome and we're in chrome now and it looked different than it does now but I was on a Mac and now I'm on my Windows computer and it does look a little bit different so that's really interesting where it was all red in the middle before I'm pretty sure and he in his email he'd mentioned to me that he had some issues with browser them consistency between browsers so I'm wondering if that's maybe a little bit of what's happening and I'm pretty sure everything in this one's happening with linear gradients once again sorry it took me a little while to find it I went right past it so we can see here we have the hamburger itself but then on the before we have a clip path awesome use of clip path here which is giving us the shape of what we can see there so it just has the background color on it but then using click paths and actually let's just let's take off the clip path because I'm not sure to be honest what there it is that's the big yellow thing so that's that's what I thought it was but I wanted to make sure so you can see that the clip path is giving us that shape and then on the after as well we have a clip path on there and not only are we using clip paths on these to give us a bit of the shape of them but there's also a nice use of borders I'm just trying to look oh here we go here's we have the border top and a border bottom and there's some playing around border radiuses as well to give us the shape of everything that's happening on some of these as well so that's why we're able to have all of the different colors in here you know we have a top we have a bottom or the you know the opening closing buns we have the cheese that's melting over we have the hamburger itself we have some contour you know lettuce or relish and ketchup or tomato or whatever it is we have all that stuff going on with one single span love stuff like this so creative so much fun thank you so much for your inch next up we have Jason Lavigne or Lavine I'm guessing it's Lavine where you can just see it's a nice little change actually mm-hmm kurios my nation is not opening anymore so maybe he played around with a little bit of I'm not sure what not sure what happened there but that's all good because we were just focused on this anyway we're actually I really like the animation here a lot better than the original one that I did it's a really simple one and I remember he mentioned that it was a simple one where it's just it's rotated instead of one of them just having the opacity disappear on it they're both rotating but it's making them line up on top of each other so the two pseudo elements are lining up on top of each other and to make one of the lines in the X so you can see that one of them's rotating and you know they're rotating together and then moving in position to be on top of each other I think that looks a little bit more elegant than the original one that I took a look at doing so I really like that and I guess he didn't like the simplicity of that so he did Jason did submit this second one with a nice little dancing icon there and this one menu opens hmm so I don't know what happened there but as long you know we get the same sort of animation going on when it's open but when it's closed we get the little dancing animation happening there now if I really like this dancing animation I'm pretty sure it was done with some keyframes because it just keeps going on forever so let's go take a look there we go I was hoping that was that so we have keyframes now to get them all doing it you can see that they're all doing the same thing it's just we have a different animation duration I always get mixed up if that situation one of them does seem yeah the speeds on them do look different so they bounce around at different speeds because if this was just the same two seconds on all of them we would see that they're all going to be moving at the same speed so they're all just moving together now one thing you could do is you could do that and then give them like a 0.5 second and say a point or I'll just do one second it's gonna be too much of a delay but that's gonna actually get them to be off from one another but all going and dancing still because what this is doing is it's adding a delay so the first one was the speed so by having different speeds they're dancing but you could also do this where there's a bit of a delay the only disadvantage with that is at the very beginning they're going to start you know those stagger start but then once it starts they keep going now if this is a real sight I probably wouldn't want it always dancing like that because it is a little bit distracting but it could be a really awesome hover so whether you're hovering you have that come in starts dancing around if you stop hovering it goes away so it sort of adds to the idea that it's an interactive element it's moving around it's doing something you click and when we click we can still have it go to something like that and then disappear back and go back to how it was but still yeah really really fun I really really like it so awesome thank you for both entries Jason really good stuff here we have a submission from Martin Lang in bird who langing Berg I know who also had two submissions let's see this first one here where isn't that cool it's like this the middle line is what's turning into the X which to be fair I actually don't know how he did that just looking at it quickly I'm not sure what what he did to pull that off because we're still keeping the line on the top and the bottom so I mean we investigate to see the only thing I can think of is he turned off the pseudo elements and that line on the top and bottom are actually borders because I don't know if there's another way to do that which would be on my hamburger itself yeah there we go so he has a border top and a border bottom so here instead of using pseudo elements the top line and the bottom line are now borders and then when we click the border changes so if we go and look down here then they have opened the borders changed and he's added the border radius to give it the shape on there and then he's crossing he's using a one or both suit of elements he might only be needing one of the pseudo that's always using sass - very nice dude - drew or recap they're both yeah they both have the same thing on it so they're just one of them is still my line and then the other one is crossing the other way am i right am i right I don't know when it's open the middle oh that's both pseudo elements are lined up on top of each other right now and we click they turn into the X I sort of screwed things up a little just now there we go I was trying to experiment so the middle the line in the middle is actually the pseudo elements from the very beginning haha okay cool and then when we there we go so the line in the middle is both pseudo elements overlapping which turned into an X and then the top and the bottom are created by the borders really fun creative solution there so thank you there's a challenge entry one from Martin and the second one will be this one here let's see so a little bit similar but this is more I think maybe something you'd actually find the other one made me think more of a hamburger just the shape of the bar the borders when it we clicked on it whereas this one it looks like something you might see on a real site it's kind of fun that merges together and then comes out to make our X and also changes color now I do want to look at the color change really fast to see because there's different ways you could do it they go he's just changing the color there okay so there we go the border colors on everything or changing or getting set and we have that so where there's no border or actually once again I have a feeling he used his borders yeah he did hamburger Oh No there was no borders so he was using the pseudo elements like we'd used them before how I originally had them set up yep top bottom yeah okay so he did it the same way I had originally did here we're just leaning into doughnuts and then it's musha's down and you can see there's transitions on a bunch of things here so we're transitioning the height and stuff like that to make this one work but that is a fun little animation I really think it is a cute it's a nice little unexpected behavior that works really really well so awesome thank you very much Martin that says entry number three I don't think I saw entry number two did I miss one of them oh you know what I think I did ha there was three so we skipped a number two that was number three now we're into number two yeah oh and this one's sort of similar it's squishing down but then we're just doing a spin animation instead with the color changing so no fancy stuff with the borders on that one awesome really really cool and that type of spin I was expecting more people to do something like that I did it just with like one little turn on it I'm doing with my hands now like you can see me but you can't see me so it's yeah but this like fast spinning thing is a really common type of thing you'll see it in a way actually here they merge and then it moves out and spins so there's a nice little delay there so we can merge before the movement but a lot of the time you'll get these faster spinning things I almost feel like sometimes it's to hide a little janky nasaan the animation cuz it's like spinning around you can sort of get away with lowering the opacity on something or hiding something or moving something that didn't look so good otherwise but it also does create this nice effect where it like spins and especially here where it spins quickly and then slows down into its final spot I think that looks really nice so thank you for your three submissions Martyn awesome I'm here we have one from Janice and this is where Janice going I'm gonna say going I'm I don't know how to pronounce OHS with whom lots on them I'm sorry let's take a look and oh this is one of the arrows submissions oh this one's fun because we get a nice little hover effect coming on it to where the arrow moves over and we hover so a few people we're gonna see a few more arrows along the way so I'll explore a little bit of well I mean basically I think it's nothing too complicated but it's a fun little thing so let's just go take a look fast to see how we did it so for this to move back and forth you can see right here is a hover effect set up where there's just a the rotate is there and there's a translate X so the translate X is moving it over normally we have our hamburger on the nav opened where the transforms just the rotate so the rotate and then we're adding the translate X to that transform to get it to move when we hover and I just want to see position right so the before translate translate Y so he's using his translates on that just to get them in the right position and then the rotation and we've changed the width here so if the width wasn't whoops I did too if the width wasn't at 50% that's where it's gonna like stick off and it looks absolutely crazy but by sticking the width on there that's what's shrinking it down to help make our arrow they're so nice fun one right there where we get the little arrow and you know it lets us know we can close it that way so instead of being an X we get an arrow to let us know another way to hide it so fine I also like how it spins into the arrow and then spins back so really cool thank you very much Janice next up we have Bobby Bobby Bobby boss blur oh I like this one I like the merging sort of it makes me think of back in the day with flash we can make like these tweening animations this type of thing just makes me think in between the way it's going back and forth that type of tweening look that you'd get back in those days when you just had like two shapes that would merge from one shape into the other a lot of you are probably watching this going you what flash what was that but yeah back in the day that was how we made websites I didn't do very much with flash to be honest but I did play around with it a bit so yeah I think that's a fun little thing that's going on there so there's switching colors there getting a background and I'm guessing there's a border-radius coming in on that at the same time and I have open border rays 50% makes it into a circle and then we get the colors changing into the light so it's giving us the shape and it's making you know even if they were extending out they're the same color as that so it wouldn't matter but they're probably stuck with inside that border radius anyway so we've you know let's just find it would they be stuck in there no matter what yeah so even even if you know you can see they're still stuck in there and there's an opacity change opacity 0.5 that's why it's getting sort of gray instead of a really dark color so really really fun thank you very much Bobby next up we have a Remco spans not gonna try again oh I have Bobby's open here twice I was like oh they had the same idea so here's Remco x' so here's another one of the aero ones now it's the same idea but you can see the animation on it's a little bit different than the other I do like the color change on there so instead of spinning it around the same as it turns into the arrow here we just have the top in the bottom sort of switching position and turning into that shape now I do see one thing I'm gonna slow the animation down a lot on this one so where's my transition let's make this like 2 seconds because I want to look at how this is happening oh there we go so we can see it diving in and then we see them diving out like that and now it's kind of cool when you see it in slow motion it's like when you when you watch I should it's kind of weird that the menu still jumping out but it does let us look at it it makes me think of like when you're watching something like something underwater or like you know you're expecting it to go faster and it's just like oh there we go I'm wondering and I don't know if this is gonna work or not but if we changed the transform transform origin to be left no right right I'm just wondering it's breaking it a little bit it doesn't really do what I thought it would do either hmm okay nevermind haha I was just thinking because of the way they're moving when it gets going really fast so I was at 350 milliseconds originally um so when it's happening fast like that there's that one part before they merge in if they were just a rotate instead of having to do that like sliding thing it might look a little bit cleaner instead of it almost looks like they hop a little bit when we do it but or you know what it might be my because my transitions only on the transform that could be it's doing that but it's not transforming the width so if we did something like that but we also added the width in here let's just see what happens with I don't know if he even did that with width to be honest I'm guessing before bottom height left with yeah he is doing the width so it's a see I just broke my transform completely by doing that why oh yeah did that does that break everything so it's it's that didn't have the effect that I wanted it to have exactly I would have to play with that it's it's different now but it's not doing what I thought it would do but I do like the idea once again of the arrow coming into there yeah it's a nice fun one so I do like that so thank you very much Remco let's go to the next one so after Remco we have Katie so Katie has three and let's start with the first two and so we're actually going to see there's me another similar one to this I sort of like this I like the idea of this like it's sliding across it gets hidden but then it like pops back out so it sort of attracts your attention back to it oh she changed my focus to let's just go oh and look at this she even made it work better allow the toggle to work of the tab keys used to access the menu cuz and that focus add eventlistener a photographer Oh cuz she has it never guess what's the night focus on the link itself hmm ah ah look at that because let's say we're here and we tab over and then I hit tab you can still see what we're doing what if I take that off is that not what happened oh I might like that is she increasing the accessibility of my site ha so okay so you can see here what that's done yeah that was really important so let's close that so it's hiding away if I click this it opens my navigation and if I click that it closes if I tab and then tap again because it was set to overflow none it's moving that into view and I'm actually losing part of my site and I can't get back to that it's sort of gone until I close my menu and then close my menu so by her adding this on here what's happened is if we hit tab and then tab again it's actually let's do that tab tab it's entering into the nav open state instead of having you know instead of and I'm being even get out of it by it losing focus so if I go like that and I lose focus my whole site it you know it's going back um tab tab and then I shift tab out oh no if it loses focus it doesn't close that's okay we don't have to be more complicated in that basically it's fixed an issue I had with my accessibility so thank you very much for that I'm happy I noticed the comment because when I was looking through this earlier I didn't see that so that's really really cool thank you for that Katie so we learned something new without even looking at the hamburger menu just on making sure that it works everything works properly I'm so and then we have the hover here but that's only if it's nav open let's just go take a look so you can see that we have a hover it's changing so it's sort of highlighting for that so that's good I'm sorry I would I was saying a long time ago before I noticed that extra javascript in there was I sort of like that it's gone and then it comes in so it just reminds us that the menu is there it was tucked away it's coming in it's a fun little animation I really think that's a cute way to do it where the button is moving over along with everything else from a design perspective I'd almost prefer if this was a circle and then it stayed a circle over here or something like that just because there's no circles anywhere I have a square I sort of have a square maybe shouldn't have even done rounded corners on that and then we have a pure circle but that's I'm really being nitpicky on that that's my designer coming out in me if there was more circles everywhere I think I'd be liking this more but I really like the idea of it sliding over and then hiding away and popping back out I think it's a lot of fun Katie's next one is where she went this really cool route with the shadow I really like this I'm so she does a really creative use of shadows here so here it's sticking out into our site and then it takes the opposite role and it's sinking into our navigation so I think that's going to neat and using some inset shadows and some shadows and this here there is one way to break this that I discovered let's change my view for a second and let's go really short and whoops I'm so you can but I like that I can do this because I can highlight more of how it was actually done by doing this so basically on the hem never opened the background is here we go we have a box shadow on there so if I turn off that box shadow and let's open her back up again oh that's on there I'm so I'm going to come on to my nav open nav toggle and you can see that she has a box shadow on there so if we turn off that box shadow it gets rid of that so it doesn't look like it's underneath this anymore so if we put that one back on now it's looking like it's like chunked out so that's what the inset shadow is doing there so I think that's a nice one and added to adjust the box shadow effects is this the other one let's just turn all this off yeah there we go so there is sort of blended into the rest of it because I guess let's just go take a look yeah you can sort of see that we're getting this weirdness that's happening here so she played around with a whole bunch with some extra shadows on there just to make sure that it blended in properly with the original effect so it sort of gave it some softer edges that stopped it from looking really really awkward so really fun on that one and her last one let's leave here and on to the last but definitely not least so here we have my hamburger but I'm gonna push tab I'm gonna hover on top and whoa I have an actual hamburger so this is a little bit similar to one of the earlier ones we saw I apologize I don't remember whose it was so but this is on hover we can see it's switching from my three lines into an actual hamburger and if I click on it it turns into french fries with ketchup on it so that's really cool and really fun once again it's a good use of if we come and take a quick look customize your burger so we can cheese the meat the bun the topping so continuing with the custom properties that I originally set up so we could change the color of stuff and then so that's customizing our colors that we're seeing right there now to get all of this to work let's go take a look so here we have our original hamburger that's all set up with she added to the transitions to get all of that to pop out and pop back in this has more or less stayed the same I think but where it gets more interesting then is if the nav is opened so this is what's doing the French frys so here's our french fry setup so basically on the french fry it's pretty simple she switched the colors of things a little bit except for one of them that's my hover effects so one of these I don't know what colors these are but one of them we have one line here is one french fry so this is probably one of the french fries this is my other french fry and then this one here is the ketchup that's on the end do we have yeah and with the width of 10 pixels that would make sense so that's one of the pseudo elements is turning into the ketchup instead of hiding it away then we have the two there which probably so she has the color and then she's added sort of a shadow to it she could have done it with a box shadow too probably but here just with a little skinny border bottom to give it the two-tone effect that we see it going on so that's really cool and then for the hamburger effect itself like this one here very similar I think linear gradients border bottoms going on with everything so getting all of this going on just with some clever use of border radiuses with some clever use of border radiuses some different colors on it and extra borders changing background colors and adding a few borders to get the stuff going on and you get this cool little hamburger and bun happening so thank you very much for Katie some three very creative submissions there so thank you for that next up we have David Betts so David came with this one it's another arrow submission so this one though has a hover effect to make our arrows go that way and that's a little bit actually a going this way is working better than going that way we'll see if we can fix that because that's a little bit if you want to go that way it just sort of moves them into the arrow position but when we go the other way it's sort of hopping a little bit so we'll see if we can switch that oh and then the arrow flips around oh I really like that I think I love how that's happening but it's happening too fast so this is where I said you could change anything you want in the CSS which even though I had my comment saying change stuff below this a few of you did come up and change other things so the transform here well maybe this was changed I'm gonna just say all because it's life a lot easier of one second and ease in out and let's this so that's gonna go really slow so you see how like oh that already looks better so there it's also the width that's transforming so you can see that it's turning into an arrow we're gonna see how that worked when why it worked a bit different from the other one we were looking at so we can see it moves into the arrow then see there I love that the transition not here but the transition from whoops the hover to when it opens up and it sort of just flipped sides I think that's so much fun where the middle line is staying the same so we're not rotating it we're just sort of transitioning from one spot to the other so for we have the width that is being changed on them and oh here we're changing the left position and by changing and then the left because the left is changing on them instead of using a transform I think it's just acting a little bit differently now the transitions and transforms do animate better than if you're using left and right near transitioning left and right properties or top bottom all of those but in a case like this we're having some fun and I think that's really fun again I really like from here and then like that when you switch over like that and one thing I definitely say is like I love the look of it maybe it was one of those happy accidents that just sort of it happened to do that but if you run into something at that play maybe with your transitions on different things I put it to all don't transition all transition the properties you want to transition and again you can do them in and you can do them at different speeds so maybe you want certain ones to be transitioning faster than others so you could definitely play around with that a little bit to get that like because I think I made it too slow now because that's way too slow but that where it flips over I think it actually works almost at this speed maybe it could be a little bit faster but that 300 milliseconds or whatever we had originally it went in a blink of an eye and then we didn't really see it but you know so you lose a little bit of that and it's one of those little happy things that somebody sees they're like oh that was cool and they keep using the site it was just this little detail but it can increase somebody's user experience so thank you very much David so thank you very much David next is coos moose goose moose there's comments in here with his thoughts on this so I gave this whole thing an extra Twista for a presto change-o feel and to obscure the buns sliding over I didn't like the ones just fading I agree I didn't like that either so I just wanted to twist in the opposite direction and translate it up to the other one and he synched up the animation times on everything with the transitions and gave it a bit of a bounce that's pretty much the type of thing I was expecting to see a whole bunch of I thought everybody was going to do this and I think it's a lot of fun it's the type of thing you'd see on an actual site it's a little bit similar to an earlier one we saw where they're lining up the two lines with each other but men so nice and clean I love just little things like that and this is why it's nice to be able to build out your own thing like this and be able to control it because you can play around with the animation speeds play around with it a little bit clean it up and just make something that's super functional on an actual production website without that much work and you know so little on the HTML side so really nice and clean nice stuff cous cous cous cous mas maybe sorry if I'm mispronouncing your name next up here by Soumya de su me add a swim yet day oh he moved yes I remember this he had left his comment saying this is for people with big screens you know big cell phone so he moved it down to the bottom here and now this little arrow one as well so you can see play it around with the sizes just instead of your typical hamburger which is quite common to see these days people play with that a little bit just to make it look not so boring or ordinary or the same as everyone else but it's still obvious what it is and in this little transition where it turns into the arrow and back and it's down at the bottom just for people with big hands this could be something we have a media query well because my one worries people are so used to seeing things at the top of the screen for navigation on websites these days with mobile apps stuff at the bottom is becoming super standard for this exact reason I don't I haven't really started seeing websites that have navigate near the bottom yet but it you know it could be something that is going to become a thing I'm not sure yet it's a really that's one of the places where there's a bit of its distinction right now between websites and mobile apps thank you very much for that nice and clean also assume you had a really good job k L M elm del M del I hope I got you right there I'm so another one where it looks a little bit different it's a it's a little bit oversized maybe but it still looks cool I like that I like that there's a little hover animation where it grows back out so we know we can interact oh and that's nice I love that little crossing effect oh that's fun that's cool I just realized that I forgot to look a little bit more detail on the arrow or on something I said I was gonna look at this something on one of the other ones in more detail and I think I forgot it sorry about that but I really like that crossing animation I think it would be really fun I see we had to do a bit more HTML for this I don't know if we needed all that Oh for the link animation oh look at that I didn't even notice that I was too busy looking at this fun thing and then you get the doo doo doo doo uh-huh I love things like that that is a really nice touch where it just sort of adds in that next step so not only does it slide out but then you get this doo doo doo doo doo but the one thing I'd like to see is when we like there it's such a nice transition that way and then it sort of just goes back to the three lines um I'm wondering if there'd be a way to animate that backwards but overall I think that's a really fun and nice solution I really like that coming in like that I think it looks really good really nice stuff assume your day next up we have kale oh sorry that wasn't to me day that was kale Cal Cal M Dale next up here I have Sasha I'm gonna say Sasha because the name I had from Twitter was I I'm gonna say I say the wrong language I'm not gonna say the language and offend somebody so I'm gonna go with Sasha on this because I couldn't even read this name I got off Twitter and just look at that nice subtle simple animation so we'll go on to the next one which is by a Steven Holl here is Steve yes Steve Hall so Steve Hall put this one together whoa look at that so much fun whoo-hoo I love that once again just playing around I'm guessing with some transitions and translates and oh so yeah that makes sense and are we doing some keyframe span close and then some keyframes the span so we have it going one way and then the other way and that works so good it's one of those fun little animations that's really cool it's sort of going outside the box maybe I'd have it stopped right before that but I'm nitpicking a little bit I think that's a really fun bouncy a little bit of joy in your life when you see one that looks like that so I'm really really cool thank you much thank you so much for that one Steve really cool another Steve this is Steve Raymond whoo-hoo another little fun one you Steve's are happy you guys are having some fun with it I'm guessing once again it'll be some key frames that are coming into play or is it just transition animation transition no no key frames there must be some delays yet so this one instead of using key frames just some transition delays going on things to set all that up very cute and fun and sort of has the hamburger actual look to it thereby making the middle one into the orange really really fun next up is check Shakib next up is Chucky and Chucky there we go a nice little spinning animation so you can see it flies in and this is where you can see like when it's happening it sort of covers up something that's happening there which is a really nice you know that's fun I think you just added more turns and didn't play with the opacity of mine maybe I'm so you can sort of see that third one disappearing as the whole thing spins around and then we have the background changing on here too but a nice little fun spinny effect I always enjoy those extra spins and stuff like that I think it just makes it look a little bit more animated and something extra going good as long as you don't overdo it and have it spin like crazy obviously here we have Muhammad Muhammad did this one with oh I like one thing that it's kind of convenient here I notice he had a cubic Bezier custom property because he reused the cubic Bezier multiple times so by I have you know by making it into a custom property you can cubic Bezier years or a pain in the butt its long values there's lots of stuff it's a perfect Kate use case to do it see and see it sort of pulls back and shoots out and then pulls back and shoots out so it's a really fast animation but it gives it this natural look to it just because of the way it bounces and stuff and the way it slows down so it keeps this sort of naturalness to it I like that it looks like it's doing like half a turn but within that half a turn it turns into an X and then it turns back here so really really fast because of the way the Bezier is set up but it nice looking very like bouncy type of animation you could definitely have you had other things on your site they were reacting in the same way it would feel so natural and looks really really good really liked that one thank you very much Mohammed next Mohammed is Lucas I have Luke here so I'm gonna go with Luke two versions oh no did I not get both versions of yours Luke oh I remember why it says two versions we click once and we have an X then we close it and if I click again turns into an arrow and I click again and then so every second time it's a little bit different it might confuse people a little bit but I think it's fun and you know it meant more work for you and more experimentation that's what this was all about so I know I'm saying we confuse people he confused me the first time when I was looking at him like oh okay that's cool and then I clicked again I was like wait did I miss that the first time and then eventually I looked and he had set up a little extra JavaScript to have it switch between the two of them so it would be one or the other and once again another arrow so we have the X and the arrow both in one little code been here a fun little experiment there and I think it worked really really well it looks nice and clean again I don't know if I'd want it to do that twice like that necessarily in the real world but I think for something like this it's perfect here we have one from Simone and I remember this one reminds me of another one we're gonna take a look at after to where I like how it works this remember on Katie's I said it was a square that turned into a circle and back like if we just did this and then had it go into that circle that was there it would work really really well I sort of like here that it's keeping this white background so it was sort of blends into the menu and then it slides back out we had no focus ring on it it would probably look even cleaner and better but having some sort of focus is really important but obviously it does give you you know the focus can be a little distracting but having focus is important don't turn off focus just because you don't like the look of it so you can see there it is working super good though nice and clean I like that it's lined up perfectly in the middle and then pops right back out really fun good stuff there C Mon really nice here we have one from James it's another hamburger that spins around into a flat hamburger and then and back again so this one is just playing around a bit with border radiuses and the colors I think oh there we go more custom properties thank you I love seeing you guys using custom properties this always makes me so happy to see and yeah here we go playing with border-radius oh and look at this the border radius with the slash thing and I always forget how that works I always do border radius like you this you're gonna see it's gonna completely change the look of that because it's doing like the for anyway the slash changes the radius of the corner itself so we have like a five percent but the 50 percent changes the radii I always get a little confused by this I've almost never see it in action James this is so cool I'm gonna have to dive into this a little bit more maybe I'll even do a video looking at border-radius because you never see the it used with the slash here I do I know I've seen it I know sort of what it does but it always confuses me when I'm playing around with it so example if I change this to like a 5% you're not gonna see a big change happen or if I change it up to 100 now maybe we will more one second let's just make this 100% it's gonna make it into like the oval and then let's change this to 50% yes so I think this is like the I'm gonna use the wrong terminology but basically it's instead of it's a hundred percent but of like starting at 50% I think is how it's working but don't quote me on this it's one of those things that I never use and I don't necessarily know how it works exactly but it's super cool and it worked super good in this example so it's something I'm gonna have to look at in more detail for sure and I'll come back with another video on this after remember after this to do it so that's so cool James you got me a little excited with that so nice also a hamburger right there so looking really good thank you very much all right now we actually have a few that are not part of the official challenge but they were fun I want to look at them anyway these first were by Kyle shook who challenged himself not real is not realizing I had a challenge going we was building out a whole bunch and he linked specifically these two to me just to sort of highlight it I said hey why not so you can see here what he's done I'm playing around I just wanted to highlight say like this is really cool he happened to be doing his own challenge and they're so fun and it really is like pushing the envelope a little bit here on this stuff we can do with our hamburgers that I think is really really neat obviously a little bit different from what we were looking at he has it with three lines but again I think we could do it very similar to what you know he has his three lines unless he was using some pseudo elements which he is so you know he's getting some extra stuff by having three lines instead of just having the one did you have the same here does he have a as the four lines or four lines obviously you do need more than one with two pseudo elements but still you can see some really fun creative stuff the link to these are both in the description just like every other one of them so if you want to see how we did them you can dive into there and this one by Emmet because he'd created this before the challenge but some of them I really like like look how much fun that is and we're just gonna look at all of them really quickly I'm not gonna dive into how we did all of them that was a nice really simple one there also a nice little simple one does that animation change a little no it's always the same so there we you know but these fun little multi-step animations are always fine it gives a little bit of joy to me and this last one is really cool so cool I really really like it so thank you so much I meant for sharing those again the link for this one is down in the description below so you can check it out thank you everybody that was a lot of submissions holy cow thank you very much to everybody who submitted thank you - if you didn't submit you can still put them up I'll still check them out hit me up on Twitter if you want to try it out and get some feedback from me but I won't be doing another video on them thank you very much to everyone who did you guys are absolutely amazing if you've watched this whole thing and you're still watching it now and you haven't yet subscribed what are you waiting for hit that subscribe button of course until next time don't forget to make your corn in the Internet just a little bit more awesome