Create Before and After Photo Effects with ScrollTrigger - GSAP/Motion.page and Bricks Builder 🔥
In this tutorial, Luke demonstrates a practical approach to using Motion Page with Bricks Builder to create engaging visual effects for web design. The focus is on manipulating clip paths to achieve dynamic before and after visual effects as users scroll down the page. Luke provides a detailed guide on setting up these effects, showcasing examples like color transitions in images and avatar animations. The tutorial emphasizes the versatility of these techniques for enhancing website interactivity and visual appeal.
Steps
Setting Up the Page in Bricks Builder:
- Create a New Section: Start by setting up a new section in Bricks Builder, adjusting its height to the viewport for a full-screen effect.
- Import and Arrange Elements: Import necessary elements, such as images for the visual effects, and arrange them within the sections to prepare for animation.
- Prepare for Animation: Apply specific classes to elements intended for animation, ensuring they can be easily targeted in Motion Page.
Configuring the Clip Path Animation:
- Set Up Parent Container: Organize images within a parent container, using CSS for initial visual setups like grayscale filters.
- Create Animation Classes: Assign classes to elements for animation, preparing them for manipulation with Motion Page.
Animating with Motion Page:
- Create a New Timeline: Initiate a new timeline in Motion Page, naming it appropriately based on the animation effect (e.g., "Before and After").
- Configure Scroll Trigger: Set up scroll triggers to control when the animation starts and ends, based on the user's scroll position.
- Apply Clip Path Transformations: Manipulate clip paths to create the desired visual effects, such as color transitions or avatar animations, as elements come into view.
Enhancing the Animation:
- Implement Stagger Effects: Use stagger settings to animate elements sequentially for a more dynamic presentation.
- Customize Animation Paths: Experiment with different clip path shapes and transformations to achieve unique visual effects.
- Adjust Animation Settings: Fine-tune the animation's timing and behavior to ensure smooth and visually appealing transitions.
Conclusion
Luke's tutorial offers a comprehensive and easy-to-follow method for creating captivating visual effects in Bricks Builder using Motion Page. By breaking down the process into manageable steps, designers are equipped to enhance their web projects with interactive and visually striking animations. This tutorial not only improves the aesthetic quality of websites but also engages users with its innovative scroll-triggered effects.
Video transcript
Hello, guys, welcome back to the channel. My name is Luke, and in this video, I just want to show you a quick example where we can use Motion Page and manipulate a clip path. This is useful in cases where you want to create a kind of like a before and after visual effect as you scroll down the page. So, you'll see this here: we have an image which is black and white, and we're going to turn this to color as we scroll down like this. And this is locked to the scrollbar, as you can see. Below that, we have another example where it goes from top to bottom. So, this is the before photo, and the after photo comes into effect there. And then below that, here we have a different example. This is just using clip path circle to animate in some avatars like so. A pretty cool effect, I think. I'm going to show you how we can create that in this video.
In this video, we will be using Bricks Builder. It's been a very popular request. All of our tutorials so far have been using Oxygen Builder. So, just because of popular demand with Bricks, I thought I'd create this using Bricks Builder today. I've just gone ahead and opened up Bricks here. So, what I'm going to do first is just create a section for our buffer zone. On this, I just want to make this 100 viewport height, and I'm going to duplicate this section just so we have one underneath. In the middle of those, I'm just going to import a section here to make my life easier. I'm going to insert this section here with the image and put this in the middle. This is going to be our focal point here, this image.
Let's open up the structure pane, and what I want to do is duplicate this image so we have two. The image below is going to be sitting on top, so just keep that in mind. I'm just going to call this color and call this BW for black and white. For demonstration purposes, I'm just going to use CSS to make this picture on top black and white. This is just using a grayscale filter in CSS to make it black and white. Then what I'm going to do is make the containing block here set it to relative, and then what we can do is set one of the images to absolute. I'm going to set the colored version to position absolute. As you can see, the black and white image is sitting on top. I'm going to apply a class to this, and I'm going to call this class clip path animation so we can use this to target in Motion Page and apply a clip path to this so it masks. And that's basically your basic setup in Bricks Builder. That's all we'll need.
On this bottom section here, for some reason, the height did not transfer over, so I'm just going to do 100 viewport height on that one as well. I'm going to save this, and now let's open up Motion Page. I'm just going to go ahead here and create a new timeline. I'm going to call this timeline before and after. We want this to happen on page scroll, so let's use scroll trigger. I want to lock it to the scrollbar, and I'm going to put the delay to zero, just so you can see. One troubleshooting tip: now you can see here we have our image. So, what I'm going to do is grab the class that we created before, so that was clip path animation, and I'm going to type that in here, hit enter, and just hover over it, make sure it's being highlighted there.
Before I edit any of these properties here, I want to show you this website which is free. I'll link this in the description below, but basically, you can manipulate the nodes here, and you can see the CSS changes in the bottom there. So, what I'm going to do is select trapezoid so that we have four nodes, and I'm just going to put them all to the very edges like this. And this is what we can use as our CSS in Motion Page. So, I'm just going to copy this value here, go to Motion Page, and what we want to do first is go to custom, the property is clip path, I'm just going to paste the value here. So, as you can see, this is being applied to the black and white image because that's where this class is applied. Black and white here, clip path animation. Now, what we want to do is on the two, we want the clip to essentially move like this, this way, and this way. So, I'm going to copy this new value, and then back in Motion Page, on the two, we want to go to custom, clip path, and paste in the new value.
Okay, so you'll notice here that it's not really working as we hope, and there's a couple of reasons for this. The first reason is we need to add a delay to the scrollbar here, so I'm just going to do two seconds, for example. But you'll notice we have another issue. So, you can see now that the pin is moving as it should, so that looks pretty good. However, there's no change on the image. Now, the reason for this is, if I go back to the from, you'll notice that these numbers here, zero, have no percentages. However, on this one, sometimes they do have percentages. So, 100% is here, but on this one, for example, it is just set to zero. So, Motion Page is looking for consistency. So, if we just add percentage signs to every single value here. So, this looks good now. On two, we'll do the same thing. So, just make sure that you add the percentage signs, just so that it's uniform.
Okay, so now, as you can see, we are getting a much better result here. This is working much better now. I do just want to change the position of these pins here, these markers, sorry. So, I want to select both of the top. So, when the top of the image reaches the green line, and we want it to end when it reaches the red line. So, the red line wants to go to the top zero, and then I'm going to set my green line to around 50%, so halfway on the page, just so that the animation starts around halfway point, and then by the time it gets to the top, it should be almost finished. So, this is looking much better now. So, I'm going to save the timeline and see what this looks like on the front. So, I'm going to scroll down here, and that looks pretty good to me. So, you can use basically any style of images. I will show you another example here.
So, let's make a new section in Bricks Builder. I'm just going to duplicate this section here. And for this example, I'm just going to get rid of the left and right columns. Well, I'll keep the right, actually. I don't need the columns anymore. I want to show you a full view. So, first, I'm just going to replace the image here. So, on the black and white version, remember, this is the one that's laying on top, the one that the people are going to see first. So, this essentially wants to be your before photo. And I'm just going to use a couple of examples I pulled from online. And then the one underneath wants to be your after photo. So, I'm just going to resize this container here, so 350, and then I want to make sure everything is centered in the middle.
All right, cool. So, this image still has the same class applied, so we can actually just use the same one in Motion Page, which is fine. So, I'm just going to save this. I do want to remove the grayscale from this one, though. I want them both to be colored. So, just get rid of the grayscale there, save this, and then let's have a look in Motion Page. So, you'll notice that the after photo is on top now. There's a good reason for this, and that's because the animation, you can just see it running here, they're basically running at the same time. So, in order to fix that, we can just toggle this option here. So, now when you scroll down, they should be independent of one another like this.
All right, so I'm going to save the timeline and just have a look on the front end. So, scroll back to the top. Now, when I scroll down, we can see the before and after photo like that. Now, the nice thing about this clip path generator is we can actually change the movement. So, for example, if I want it to go down, once again, we can just copy this value, polygon. But I should mention, if you want this one to go from right to left, and then this one from top to bottom, we should probably use a different class for this. So, I'm going to apply a different class. I'm just going to call this TB, top to bottom, and then I can delete this one.
All right, I'm going to save this, and then back in Motion Page, what we need to do is create a new timeline for this specific class. So, back in Motion Page, I'm just going to go ahead and go to my library. I'm going to duplicate this. I will call this before after top to bottom. So, because we duplicated it, we can just leave these settings the same, and then all we need to do is right-click here, edit, and just add TB, from top to bottom. And then we'll change the values here. So, we'll go back to this one, just copy this value here once again, and make sure you're on the from. We want it to start from this one. And remember, once again, just to add the percent signs.
Okay, and then in Clippy, we'll just move these to the bottom, copy the new value, and then on the two timeline, we'll paste that in there. And then once again, replace, well, not replace, but we'll add the percentages like that. So, now you can see we have this clip path going down now, from top to bottom. All right, so I'm going to save this one. Now, on the front end, we should have two different animations. Let me load that back up here. So, we'll scroll down. You can see this one is moving, and then this one should be independent automatically. So, that's pretty cool.
So, because we're doing it this way, with two separate timelines, now what we can do is go back to the original one. We don't need this one anymore because there's only one instance of this class on this page. But if you do want to reuse this class on different elements, then just make sure that this is checked. So, I'm just going to save this once again and do one more final check on the front end. So, a pretty cool feature. You can use this for before and after photos. If you have a salon, beauty salon, or you know, you want to show repairs if your website is kind of related to mechanics, then you can use that. But you get the idea, guys. And it's a simple tutorial. I hope it's useful. You can do many nice things with it. You could even manipulate the nodes in any way you want. So, for example, you could start with a triangle like this. This could be your start point. And then what you could do is manipulate it from this position into a square, which could look kind of cool. I guess we could actually just give that a very quick try on the original image.
So, I was going to copy this value here, copy. Let's go back to Motion Page, and let's manipulate these once again. So, the starting position was to be kind of a triangle. The percentages here, 0%, and then let's make it a full square now. Copy and paste into the two. All right, so you can see the triangle is actually kind of rotating because that's essentially how we made it in the clip path editor here. Remember, this node started down here, this one here, and it's basically the way we drag the node, that's how it's animating in. So, it's pretty cool. It's pretty flexible. And yeah, I hope you like this. Just check one more time on the homepage here. Yeah, I guess this could look kind of cool if the images are slightly different, not just different in color, but if it's like this one, for example. But what I'm trying to say is that it's pretty flexible, and you can manipulate these nodes in any way you like. You can even use different shapes, which is pretty cool.
Okay, guys, a different version I want to show you quickly is with another template. This template just has many different circle avatars. I just want to show you another really cool effect with this one as well. So, I'm just going to search "people" here. Now, I'm going to insert this one. As you can see, this has a lot of different avatar circles like this. Just going to execute this code here. Now, I'm just going to move this up above the buffer section here. All right, so what I'm going to do is, none of these have a unique class, really. Well, they do, but I'll show you a different way we can use a selector. So, I'm going to select the wrapper here. Now, if you look at the markup, this is "avatar wrapper." So, I'm just going to add a class to this, call it "avatar wrapper" like that. I'm going to save it, and then in Motion Page, what I'm going to do is, I'm just going to duplicate one of these timelines. So, I'm going to open up this one first, go to library, and then right-click, duplicate.
So, now I have a new timeline. I'm going to call this "Avatar U clip path." So, all these settings, once again, can be the same. And this time, what I'm going to do is, for the selector, I'm going to do "avatar wrapper," and I want to target everything inside of that where there is an instance of an image like this. So, the clip path, instead of using polygon, we can use a circle now. From, we want it to start at 0%, but to, we want the circle to go to 100%. So, you can see now that this effect has been applied. What I'm going to do for this one is, I don't want to trigger each iteration individually because the selector is only one instance, but I do want to stagger this one. So, stagger each, let's go to total amount, 1 second, so it's quite fast. So, you can see we have this cool effect as well. This is also using clip path. So, I just thought I'd show you that really quickly. It's another cool effect that you can use.
So, we go back to the front, we should now have three different examples. This is the triangular effect here, top to bottom, and then this one, pretty cool effect there with the names coming up. But yeah, hope you like this, and if you got any questions, please do let us know. So, there you have it, guys. Thank you once again. And if you liked this video, please do give it a thumbs up. And if you've not already, please do consider subscribing, and we'll be back once again very soon with a new video. Thank you.
