 Recently someone asked me how the animations were done over at arena.net, so I went to take a look and after seeing them I wondered the exact same thing. So I dove into the code to take a look at what was going on and it turns out that they were using mask image and that was a bit of a coincidence because I've just recently put out two videos on mask image but they're nothing like this and I never would have thought of using mask image in that way but it turns out it's actually kind of easy to do with it so let's take a look at how we can use it to do this type of cool effect. Hello my front end friends thank you so much for coming to join me once again and if you're new here my name is Kevin and here at my channel I help you fall madly deeply in love with CSS and today we're going to be doing that by taking a look at another awesome use case for mask image. So jumping over to their site there was one problem that definitely did come up that I had to figure out a way to do but to show you I just poked around in their dev tools and I found they had these two images that were overlaying each other using position absolute so that makes a lot of sense to be able to do that type of thing where you use their mask to hide one of them and then show it to make it look like the colors are splashing out but then I was like well how did they do that and eventually I found this mask and let's open that one and this is the mask they had and I went oh so we basically this was the hard part was making all the frames that you want to be able to do it and basically each one of these things along the way that we see on the screen now if you zoom in like each one of those is another frame along the way and so I went to Photoshop and I started making it now you don't need to use Photoshop there's other tools that we could use for the same type of thing just know that these white areas are actually transparent on here if you want to know more about making image masks you can check out my previous video where I looked at sort of the basics of how they work but you need to go frame by frame to do this and after a few failed attempts the other thing I realized that they did that makes this look really good is sort of keeping some areas not painted I think is really nice but I really like this bird here as well where the bird wasn't there and then it comes in after so I definitely wanted to do something like that I think it adds a nice little bit of interest and I think it also helps having the white background that you sort of go into after having done three of these the last one I did sort of get a little bit quick with with certain parts of it but I think it definitely turned out the best and so it's that third one that we're going to be looking at the hard work is definitely creating all the frames for your mask the easy part is actually getting it to work which we're going to be focusing on right now so moving that off to the side and let's go over to my own where we're starting with nothing I just have this mask container that we're going to need just because we need some position absolute things so it makes life a little bit easier to do it this way now in here we need to have the two images and they actually did it both with background images there's no reason that they can't just be images themselves or one div that's an image and one div that is with a background image but I actually found it easier to have the one of them is an actual image because then it sets the size for what you want instead of having to use any sort of weird sizing stuff we throw our image in here and for me I'm going to do this as my black and white image because I want to start with my black and white image we're going to show the other one which is going to be overlaid on top but completely hidden away by our mask and when the animation runs it will load it in so it might even be easier to do this with an actual like two images one for each of them but in this case I'm actually going to do this one here with a div instead of an image just to show you that if you are doing that how the positioning of it would work to get it to function properly because you might need things set as background images if you need text or something on top of them as well though with the absolute positioning anyway we'll do it with a div just to sort of make it a little bit more complex but just to show you that it's pretty easy to do anyway but you need these two images and then you need to have the mask that's going to transition between the two of them that's sort of the things that we need to have before you can actually get this to work so yeah we're going to switch that image out for a div like this we'll hit save and we just have our black and white image to start with and we can get started on this and jump into the CSS because as far as this goes that's all we need you can see I did put a replay animation here which we're going to use afterward just to make like easier to replay the animation to make sure things are working and so let's jump on over to my CSS where there's nothing related to my mask in here yet I just have my button styled and some little things actually the image max with 100% here because I'm using an actual image would be important but I'm assuming you're already doing that anyway and then we can come in here I'm going to do my mask container and on that we need a position of relative because we will be doing absolute positioning on the pieces that are inside of it then we're going to come in let's come in first with my color image called it I think we did call it that perfect so my color image let's start by coming with this and making sure we can get it lined up properly so my color image is going to be a position of absolute and then we add my background on here so background image and as we saw we already have one ready so we'll put that on really fast so with my image being there we don't actually see it yet because this div is has nothing inside of it we just have a blank div right there and because it's a blank div it has no height or width but we are using position absolute so we can use an inset of zero on that to have it fill up the entire space the problem is my image is really big I probably could have optimized my images here a little bit we're just going to set a background size of cover on there though to actually have it be the right size and now because this div the mask container its size is being set by this image in here so the image here is defining the height of this div which means that this is sort of defining the total size we have this filling up the entire thing because of our inset zero and again that's top bottom left and right zero so this color image is taking up the entire space and it's the same dimensions or the same aspect ratio anyway of the original so they're just perfectly overlaying on top of each other so if I were to drop the opacity on this and I hit save you can see that the two of them are coming through we can even drop that a little bit lower so you can see the cactus is sort of fading away as we go into this other the other images there so they're perfectly overlaid on top of each other and that's what we really need to get started with this so the next thing we're going to do is come in here with our mask now I'm going to use the prefixed versions for now because I'm using chrome which needs the prefix so I'm saying that and I'm not putting the prefix webkit mask image and actually I think the mask image you don't actually need the prefix for it's all the other ones but we're just going to prefix everything I'll add in the non-creased fixed versions after which work in non-chromium browsers so for this we need our url which in this case is uh image mask dot png and I used a png instead of svg like I recommended in the original video where I explain things because I have some transparency that's happening if you weren't having any transparency then that would be you could just go with an svg be much later wait probably the better way to go but I was playing around with some different effects you can see like these low opacity areas here I sort of tried to bring that same idea into my mask when I was using that and you can also see here this is yelling at me in vs code because this is non-standard uh that you can see there that's just because it's prefixed and they're just be careful this isn't going to work everywhere but don't worry we'll fix that after uh and right away you can see something's happened which is good it's it's masking away my uh what we had now the problem is because the png is this like gigantic file that goes on and on and on if we go and take a look at my finished version of it you can see I was doing a lot of playing around here it was mask image was my finished one image mask and so I mean it's hard to see that we zoom in a little bit you can see all the different pieces of it but it's this gigantic image but to actually get that to fit I had to change the height of it so it's actually a lot smaller than the finished one just because if not the file side it's already 300 kb so we could probably optimize that I didn't do any image optimization we could even run that through and probably make it a web p and make it even smaller and it would be fine um because even if it does lose quality it's moving so quickly it doesn't really matter uh if there's a little bit of blurriness or anything going on with it and because my image is so much smaller the first thing we're going to do is we're going to do a webkit uh mask size and we can use cover on here as well and that might change anything it's not change anything that's good and then we're going to come in with a webkit mask position and the mask position we're going to start at zero percent zero percent and it should stay gray but if I change this position to like a 50 whatever it doesn't matter we can see that it's coming in and I'm actually going to change this to a pixel value now to explain a little bit more what's happening because it makes it easier in the dev tools so if we open up our dev tools and we find that and you find your mask position and here if it's in percentage you can't drag but if it's in pixels you can actually drag things around and move your mask uh and there is my mask and you can see it's if I keep dragging it's sort of like there's one frame and there's the next frame and another frame and anyway you get the idea there's these different frames I don't know where that that's probably supposed to be lined up somewhere over here I guess I don't know um but we'll we'll see how it works later but you can see all these different frames are on there and basically we want these frames to slide across right there's a trick to all of this in getting that to work um but we want to start it at zero zero for now we'll do it as a hover and then we'll actually create an animation let's just see if we can get this to work um so we'll say color image hover and then we're going to do the mask position here and let's delete that and delete that and we want it to go to 100% and so this is always like its own percentage so we're going the mask should start here and then move all the way across the other way if ever you try this and it's not working for some reason you might need to actually make that a negative to have it slide the other way so if you're following along with your own that you've created and it's not working try just try a negative number or go in the dev tools with pixels so you can drag it around and see what's happening um and we can see that's working so let's do a transition on that uh so quickly adding the transition here of my mask position over 500 milliseconds let's say see how the whole thing let's slow that down let's make it like 5000 milliseconds and you can see those all the frames are sliding by shooting one after the other after the other and then it slowly gets into place and then if I go the other way it slowly goes the other way which isn't quite what we want it's an interesting effect maybe there's some stuff you could do with that uh but instead of that what we actually want to do is we want to do this in steps instead of having it slide and I know we can do this animations I've never tried doing this let's try 24 and hit save ah it does work look at that so we can do um instead of it sliding across it's saying that I want to take that entire animation and basically turn it into 24 distinct steps and the reason I'm choosing 24 is because I made 24 frames in my animation when I created it so that's an important thing there but you can see it's going really slowly and it's not too fantastic well let's close our dev tools because we don't need that anymore and let's maybe make this uh I don't know 1000 milliseconds or one second and sort of get that thing where it comes in really not as well done as theirs was they did a much nicer job than I have but I still think it's kind of cool and it looks pretty good and so there we have it working with hover now personally I wouldn't want to keep it with a hover effect it's kind of weird to do that so ideally we have an animation set up for it so to do that we can set up some keyframes we'll call it add color for our animation name there and then basically we just want to say that it's going to start at a you know the zero percent of our animation is going to be this and we'll duplicate that and say that take off the prefix version there you can duplicate this put this at 100 and then change this one and change that one to 100 so now we can add the animation in there I've already done this and so then we have that now we just need to be able to add that animation in so we're going to do a mask animation class and it will be an animation and on here we want to put in an animation we need the name of our animation so that was my add color how long it's going to take we want the 700 milliseconds and we want it to go to there and we're going to put forwards at the end forwards just so when the animation is finished it actually stays and it's all done let's just we can put these on put that on a different line just so you can see everything at once I've already set up my button to be able to add the class and and run the animation and reset it so we can see it goes there I'll share all this code and stuff in a code pen or something so if you want to see what the js was it was very rudimentary it's not really what we want we can see every time we do that it works perfect and my animation runs so the only other real consideration that you'd want to take with this is again make sure that you have webkit and non-webkit versions so it works in chromium and non-chromium browsers and of course you'd probably want it to actually happen when you scroll in similar to how it actually happens on their website here right when we're on the arena.net it's when you scroll into view to do something like that I think an observation observer would be perfect and it just happened to have covered that in a previous video that you can watch right here and with that I would like to thank my enablers of awesome Jan Johnny Michael Mr Dave Patrick Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome