 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 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 wanted to 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 key frames 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 Going to see there's several people did arrows 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 because 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 Tim a 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 what I am familiar with I may 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 want to add a little bit of ketchup 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 come and take a look at the CSS He's used a custom property to set for the color of the ketchup Which is 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 a nice way where you can get a straight line sort of transition between two car Two 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 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 Riz a can Where it's a bit more of the traditional one 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 and take a look at this 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 close or nav open is put on there Oh, so we have a nav close and a nav open and he's running it to run the animation forwards He is moving he is 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 a nice And fun. Thank you very much for your submission Riza on the next one Riza Riza I'm guessing it's Riza 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 over extend it and then make it come back Just a little bit So it's like it's been 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 it or even the last one It's probably a bit of an extreme example, but it might be something 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 by all 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 Let's go take a look There we go. So he's here We can see what he's done is he's taken out the 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 will 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 going to 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 Vlasis 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. I can see now actually when we click on that It sort of flattens out and then on flattens out. I know that he said actually hmm That's funny. I was looking at it with chrome and we're in chrome now and it looked different Then 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 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 a clip path and actually let's just Let's take off the clip path because I'm not sure 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 is some playing around border radius is 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 con or 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 interest next up. We have Jason Levine or Levine. I'm guessing it's Levine Where you can just see it's a nice little change actually. Mmm. Curious My navigation 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 Where 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 rotating 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 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 the second one With a nice little dancing icon there and this one menu opens. Hmm. So I don't know what happened there But is 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 it 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's duration 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 point five 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, they'll stagger start but then once it starts they keep going now if this is a real site 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 while 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 Langenberg who Langenberg Now 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'm gonna 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 we click the border changes So if we go and look down here Then that 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 pseudo elements He might only be needing one of the pseudo and that's always using sas to very nice Do do do Orica 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? Oh, no 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 turn 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 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 There you go, he's just changing the Color there. Okay, so there we go The border colors on everything are 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'd originally had them set up Yep Top bottom. Yeah, okay. So he did it the same way I'd originally did here We're just looking at pseudo omelettes and then it smushes 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 and now we're into number two 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 that type of spin. I was expecting more people to do something like that I did it just with like a like one little turn on it I'm doing it with my hands now like you can see me, but you can't see me. So it's 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 jankiness in the animation because 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 Martin awesome Here we have one from Janus. This is where Janus going. I'm gonna say going I don't know how to pronounce O's with oom lots on them. I'm sorry So let's take a look and oh, this is one of the arrow submissions Oh, this one's fun because we get a nice little hover effect coming on it too 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 he 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 much 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 there 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 fun. 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 Bostler. Oh I like this one. I like the merging sort of it makes me think of back in the day with flash when we can make like these tweening animations This type of thing just makes me think of a tween 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 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 they're switching colors. They're getting a background and I'm guessing there's a border radius coming in on that at the same time Nav 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, you know, let's just find out Would they be stuck in there no matter what? Yeah, so even even if you know, you can see there's there's still stuck in there and there's an opacity change Opacity point five 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 Spannes Not gonna try again. Oh, I Have Bobby's open here twice. I was like, oh, they had the same idea. So here's Remcos So here's another one of the arrow 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 at the same thing as it turns into the arrow here We just have the top and 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 two seconds because I want to look at how this is happening So, 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 that I should It's kind of weird that the menu is 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 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 Doesn't really do what I thought it would do either. Hmm. Okay, never mind I was just thinking because of the way they're moving when it's going really fast So it was at 350 milliseconds Originally, so when it's happening fast like that, there's that one part before they merge in if they were just to 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 you even did that with width to be honest I'm guessing Before bottom height left width. Yeah, he is doing the width. So let's just see I Just broke my transform completely by doing that. Why? Oh Did that bro 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 too. 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 gonna 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's sort of a tracks 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 with the tab keys used to access the menu Cuz now focus at event listener now toggle. Oh cuz she has it now focus. What's the now focus? Oh The link itself. Hmm. 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 tab again because it was set to Overflow none. It's moving that interview 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 then we can even get out of it by it losing focus So if I go like that and I lose focus my whole site, you know, it's going back Tab tab and then I shift tab out. Oh, no, if it loses focus, it doesn't close That's okay. We'd have to be more complicated than 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 even without even looking at the hamburger menu just on making sure that it works everything works properly 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 So 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 I 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 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 roll and it's sinking into our navigation So I think that's kind of 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 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 nav opened But 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 shadows 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 it's 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 onto 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 whoop 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 who's it was So but this is on hover we can see it 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'd 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 fries. So here's our french fries set up So basically on the french fries. 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 You could have done it with a box out of two 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 Betz. 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. You see I 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 comments saying change stuff below this a few of you did come up and change other things So the transform here. Oh Maybe this was changed. I'm gonna just say all because it's gonna be my life a lot easier of one second and Ease in out And let's just so that's gonna go really slow. So you see how like oh 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 white worked a bit different from the other one We were looking at so you 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 flip 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 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 it 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 kusmus kusmus There's comments in here with his thoughts on this So I gave this whole thing an extra twister for a presto change of 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 synced 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 gonna 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 man 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 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 kusmus Kusmus kusmus, maybe sorry if I'm just pronouncing your name Next up here by sumia day sumia day Sumia day. Oh He moved yes, I remember this he had left his comments saying this is for people with big screens You know big cell phones. So he moved it down to the bottom here Oh another little arrow one as well So you can see you 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 a nice 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 worry is 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 navigations 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 a distinction right now between websites and mobile apps Thank you very much for that nice and clean also sue me a day really good job Kale M Elmdahl Mdahl hope I got you right there So another one where it looks a little bit different. 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 That's fun. That's cool. I just realized that I forgot to look a little bit more detail in the arrow or on something I said I was going to look at the 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. Uh-huh I love things like that. That is a really nice touch Where it just sort of adds into that next step, so not only does it slide out, but then you get this doo-doo-doo-doo But the one thing I'd like to see is when we like there It's such a nice transition in that way, and then it sort of just goes back to the three lines 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 the bat coming in like that. I think it looks really good really nice stuff assume you day Next up we have a kale. Oh, sorry That wasn't to me a 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 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 the 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 Hall here is Steve Yeah, 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 that makes sense and are we doing some key frames span close and then some key frames the spans 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 stop right before that but I'm nitpicking a little bit I think that's a really fun bouncy little bit of joy in your life when you see one that looks like that So really really cool. Thank you much. Thank you so much for that one Steve really cool Another Steve. This is Steve Raymond. Whoo. Whoo. Another little fun one you steves are having. Oh, cool You guys are having some fun with it I'm guessing once again, it'd be some key frames that are coming into play or is it just transition animations transition No, no key frames. There must be some delays. Yeah, 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 there by making the middle one into the orange really really fun Next up is check. Check keep next up is to keep and check keep 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 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 on As long as you don't overdo it and have it spin like crazy, obviously Here we have Mohamed Mohamed did this one with oh, I like one thing that it's kind of convenient here I noticed he added a cubic bezier custom property because he reused the cubic bezier multiple times So by have you know by making it into a custom property you can cubic beziers are a pain in the butt. It's long values There's lots of stuff. It's a perfect case to do it. So you can 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 could definitely have yet other things on your site They were reacting in the same way. It would feel so natural and looks really really good really like that one Thank you very much Mohamed next Mohamed 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 and 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, you know, I'm saying we confuse people Confuse me the first time when I was looking at I'm 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 pen here a fun little experiment there And I think it works 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 oh, I remember this one. This reminds me of another one We're gonna take a look at after to where I like how it works this member 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 a 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 They're Simone really nice Here we have one from James It's another hamburger that spins around into a flat hamburger and then I'm 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 this, but you're gonna see it's gonna completely change the look of that because it's doing like The four anyway the slash changes the radius of the corner itself So we have like a 5% but the 50% changes the radii. I Always get a little confused by this. I 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 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 100% 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. I have to remember after this to do it So that's so cool James. You got me a little excited with that So nice also hamburger right there. So looking really good. Thank you very much Alright 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 tour by Kyle Schuch who challenged himself not real is not realizing I had a challenge going where he's building out a whole bunch and he linked specifically to these two to me Just a sort of highlight and I said hey, why not? So you can see here what he's done 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 he's 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're looking at He has it with three lines But again, I think we could do it very similar to what you know He has these 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 Do you have the same here? Does he have yeah? He has the four lines well 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 if you want to see how we did them you can dive into there and this one by Amit 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 They're also a nice little simple one Is 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's really cool So cool Really really like it. So thank you so much and it 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 to 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 corner the internet just a little bit more awesome