Create an Awesome Image Reveal Effect in WordPress - Motion.page/GSAP

Hello guys, welcome back to the channel. My name is Luke, and today we have another user requested tutorial. We're going to be creating something that looks like this today. So one of our users asked if it's possible to make an image transition in Motion Page. If I just refresh this here, watch the image. So as you can see, it has this nice transition where there's kind of like a color overlay, and then once that comes in and then back out, the image underneath is revealed. So it's pretty cool, and it is quite simple to make in Motion Page, so I'm going to show you how to do that right now.

Okay, so all I've done here is just created a page called Image Animation. This is blank, and I'm going to open this with Oxygen here. Alright, and just to save a little bit of time, I'm just going to go ahead and use a template over here, Design Set, sorry. Alright, so something like this I think is going to work quite well. I'm just going to make a couple of edits to this. So I don't want the radius there, so I'm going to remove some classes. I don't want the shadow either, so I'm going to remove this one, and I'm also going to remove this one. Alright, so if we go here, you can see we have our left column, and then in there we have the image which looks like it's center aligned. So all I'm going to do is wrap this in a div. This div needs to be relative because the color inside needs to be set to absolute. So what I'm going to do is just rename this div to Image Wrapper, something like that. And then what I want to do is add another div. Now this div here wants to be below because if it's below, then it means it's going to show up on top. And I'm just going to call this Color Block, just so I know what's going on here. Now I'm going to set Color Block to be positioned absolutely, and I'm just going to make sure the Image Wrapper is also set to relative as well, just so that this does not go outside. Color Block, what I'm going to do is on the ID, so actually I'm going to remove this class here, sorry. What I'm going to do is on the ID, go to layout, set it to Absolute here, and then set everything to zero here, so it spans across the whole image. And then what we can do is give it a background color. I'm just going to use something like this purple here. And for now, that's all we need. I will show you how to make this a little bit more efficient after, but just for now, I want to teach you just how to create the effect first of all. So I'm going to save this and then let's go ahead and open up Motion Page.

Alright, so I'm going to go ahead and create a new timeline. I'm going to call this Image Reveal. I'm going to target our newly created page, which is this one, Image Animation. And just for now, I will work on the page load, that's no problem. So what I want to do for this is, if we think about it, we want both the image and the color block to transition in from the right at the same time. We're not going to see the image because the color block is always going to be on top. So what I'm going to do is just target this ID. I'm going to use this ID and use it in the selector in Motion Page. I'm going to do this ID followed by the image which is inside of it. But I also want to do, at the same time, the div. So the only div within this wrapper is the color block. So by doing this last selector, I'm actually targeting this one as well. So here I'm targeting both the image and the color block, and just press enter here. So you can see when we hover over this, it's selecting this area. And then from, I want to translate it on the x-axis minus 100%. And then two, we want to bring it back to 0%. So if I play this, you can see that they're both coming in like that. Now the only problem, obviously, is we can still see it. So in Oxygen, what I'm going to do on the wrapper is just make sure that this is set to overflow hidden. Save that. Now in Motion Page, we shouldn't see it. So if I refresh this and play it again, you can see now we're having this nice effect already. That's playing a little bit too fast. I'm going to move it forward just so there's a slight delay, and I want it to be half a second as well. So after this is finished, now what we need to do is only translate the color block. Okay, so I'm going to make a new animation node here, also have a second. And then what I'm going to do is, once again, target the div inside, which is the color block. And then we can use translate. Now we can do positive hundred, only on the color block. So if we go back to the start, we kind of get that effect. Alright, it's a little bit fast, but I think fast is good if you want to show images on your page as you're scrolling down. You don't want to wait too long. So this is how you would do it just using a selector. Now, bearing in mind, this would only work for this instance. If you want to make this reusable, we could start using classes. So let me go ahead and change this to a more efficient style.

So on the Image Wrapper, I'm going to give this a class of MP Image Reveal Wrapper. So I'm going to copy that, hit enter. Now what I want to do is remove everything from here, the ID, and we'll just apply it to this class instead. So layout, we had overflow as hidden. Okay, now what I'm going to do is on the color block, I'm also going to set a class on here as well. So this is going to be MP Image, MP Image Reveal Color. And then I'm going to apply the color, the background here, to this class instead. And I'm going to remove it from here. So I chose a little bit of a lighter one there, but that's no problem. Also layout as well. So remember, we set this to absolute zero. So I'm just going to remove this and we'll put this on the class instead. Okay, so save this. And now what we can do is, I'm just going to delete these, and I'm going to start this from scratch, actually. So I'm going to change this selector. So now what we need to do is do our class one more time. So it was MP. So to select the image, we'll need to use this selector once more, like this. But now, because we created a new class already, we could just do also our new class for the color block. So that was Image Reveal Block or Color. Okay, cool. So we have the two classes here. So that should work like that. And now, once again, create a new animation node here, half a second. But this time, I'm just going to edit this just so I can copy it. And then on this one, once again, only one full stop there, translate on the x-axis, positive 100. So this will be a little bit more efficient because you can reuse these classes now across your website. But we get the same result there. So I'm going to save timeline, just have a quick look on the front. There should be a slight delay once it's loaded. Perfect. Now, if you want to reuse this, obviously, in Oxygen, I'm just going to copy this a few times. Now, remember, they're all using the same class. Save that. And now, as I scroll down, what I want to do, instead of page load, I want to use Scroll Trigger instead. Okay, so what we need to do is look to scrollbar. Actually, no, I don't want to look this to scrollbar, but I do want to trigger each iteration individually. Okay, so they don't all fire off at the same time. So the animation plays only once it's reached the green line. We're not looking it to scrollbar, so don't worry about this red line here. And this is only going to play once as well. If I scroll up like this, it's already happened. They don't repeat themselves. So once again, save timeline, have a look on the front. So this one, it's already reached the green line, as you can see. So what we can do, actually, is move this a little bit. So I'm going to change this to around 65. Make sure that's saved. Hit refresh. So now we only get the top one here, which is much better. I'm going to scroll down here. Obviously, you could add animations to your text as well to make it all look a little bit better. Obviously, this tutorial is just for the image reveal. Keep scrolling down like this. Perfect. So that's how I would go about creating something like that.

So there you have it, guys. Another quick tutorial today, another user requested tutorial there. Quite simple, very nice effect. Once again, if you liked this video, please consider giving it a thumbs up. And if you've not already, please do subscribe. I'll see you in the next video next week. Thank you.