Create Fluid Curves with Motion.page/GSAP! 🔥
In this video, Luke showcases how to create curved scrolling effects using GSAP code, a technique that's increasingly popular in web design. The focus is on enhancing the visual appeal and interactivity of websites by implementing dynamic curving motions as users scroll through content. He guides viewers through each step, using Bricks Builder for the setup and Motion.page for the animations.
Steps
Setting Up the Page in Bricks Builder:
- Create a New Page: Start by setting up a new page called 'Curved Sections.'
- Import and Arrange Sections: Add and arrange various sections like a hero section and a CTA, preparing the layout for the animation.
- Prepare Elements for Animation: Integrate blocks within these sections, applying specific classes like 'Animate Curve' to elements destined for animation.
Configuring the Scrolling Curve Animation:
- Set Up Animation Containers: Ensure the element spans the entire section by adjusting its position settings to absolute.
- Create Animation Classes: Assign unique identifiers to the animated elements to facilitate targeting in Motion Page.
Animating with Motion Page:
- Create a New Timeline: Initiate a new timeline named 'Curved Sections.'
- Configure Animation Trigger: Set triggers that activate the animation as the page scrolls, using parameters like scroll locks and delay settings.
- Apply Curving Effects: Implement the curving effect using custom CSS properties and JavaScript to manipulate element borders as the page scrolls.
Enhancing the Animation:
- Implement Looping Effects: Adjust the timeline settings to loop through the animation, maintaining a continuous curving motion.
- Customize Animation Extent and Timing: Modify the extent to which elements curve and the timing of these effects to align with design aesthetics.
- Refine Animation for Smooth Transitions: Optimize settings for smooth transitions, ensuring the curving effect integrates seamlessly with the rest of the page design.
Conclusion
Luke's tutorial offers a thorough and practical guide for integrating sophisticated curving animations into web designs using Bricks Builder and Motion Page. This approach not only boosts the aesthetic quality of web pages but also enhances user interaction through creative and dynamic design elements. Designers can follow these steps to incorporate engaging, animated content into their websites, significantly improving the visual and interactive experience for visitors.
Video transcript
Hi guys, welcome back to the channel. My name is Luke, and in today's video, I'm going to show you how you can create curved sections as you scroll down. Now, let me show you what I mean here. So, this yellow section, as I scroll down, you can see the bottom of it gets this nice curving effect. And the way I'm going to do this today is I'm going to use Gap code to achieve this effect. It's kind of a new technique that we don't usually use in our tutorials. But yeah, let's get started.
In this video, I will be using Bricks Builder, and let me show you how I made this effect. Alright, so I've just gone ahead and set up a page here called 'Curved Sections,' and I'm just going to go ahead and edit with bricks. So, what I'm going to do first is I'm just going to use some templates to speed up this process. I'm going to use a hero section. I also want to use a CTA example, CTA insert. Alright, and then in the middle, let's create a new section here. So, section going to move this to the middle. This is the section that we're going to be working on today.
Alright, so what I want to do first is I want to add a block inside of this, and this block here is the element that we're going to animate. So, I'm just going to give the name 'Curved Animation' like that. I also want to add a class to this so that we can target this easily in Motion Page. Something like this, 'Animate Curve,' is fine. And I need this to span across the whole section. So what I'm going to do is on this section, I'm going to set it to be relative, and then the curved animation element, I'm going to go to layout, position absolute, and I'll set zero in all of these boxes here just so it spans across the whole section like this. I'm just going to move this up here like that.
And the next thing I'm going to do is on this element here, I'm going to give it a background color, BG secondary, just so it's easy to see it like this. And then before I open Motion Page, just for demonstration purposes, what I'm going to do, I'm just going to set the height to be a little bit higher, so 50 viewport height, something like this. Sorry, this needs to be on the section. Okay, so that's our basic setup, and I'm going to save this for now.
And now let's open up Motion Page and work our magic. Alright, so I'm going to create a new timeline here. I'm going to call this 'Curved Section' or 'Sections.' Let's select our page that we created. So as you can see, this is our section right here. Now if you want to reuse this animation across your website on different pages, then make sure that this button here is checked, so the timeline will load on all pages. Next, I want this to be on the scroll trigger, lock to scroll bar, make sure this is checked, and I'm going to change this value here, the delay to 0.3 seconds.
All before I touch these, I'm just going to go ahead here and target our element, and we'll select the class that we just created here. Now, as I scroll down, everything looks good, so we don't need to change anything on from, but as we scroll down, we do want it to change to something. So let's go to two, and here I'm going to use some custom Gap. Right, so click on custom, and then toggle this box here, and now we can write some JavaScript in here. Now with gap, we can actually target each corner, which is really nice. So to do that, I'm just going to go ahead and type border-bottom-right-radius like this, we'll do a colon like this, and then we'll enter some values in here. The values I'm going to use is 70%, so you can see that's changed here at the right. So 70% and then 50%, okay, and then we'll do a comma, and then we'll enter—well, let's just copy this, actually. And now we'll target the bottom left radius as well.
Alright, so you can see we have this curve effect. Now, obviously, it's not set up quite right, so let's go ahead and play with these values here. So the main animation, basically, it's at the bottom of this element. So I'm going to go ahead and target the bottom, so when the bottom element reaches the green line, let's set the green line to around 75%, and then the red line is the finish. So let's set this to around halfway. So now, you can see we have this better effect. It's quite fast. If you want it to be slower, then you can just move this red line further up. So let's do, for example, 35%. So we have this nice effect going on, a curving effect.
So I'm going to save this timeline. We'll just have a quick look on the front end. So, I'm going to scroll down here, and quite a nice effect with this section. So, I'm just going to go ahead and populate this section here in Bricks Builder. So what I'm going to do is go to templates. I'm going to use this section's content here, and I'm just going to move this container up into this section. We don't need this one anymore, so delete. And then the tpjs will move that up here as well. And now we can delete this one.
Alright, so because we're using a block element for the curved animation, what we need to do is on this container, I'm just going to change the Z index to something like two, just so that we can see everything on top. That's perfect. And I'm just going to change the color of this text a little bit, text light. And then one more thing I need to do is because on the section, remember, I gave this a specified height, so we don't need this anymore. So now, it will be auto. Let's save this.
And now let's have a look one more time on the front end. So as I scroll down, you get this nice curving effect, and scroll back up, it should reset like so. So there you have it, guys, a nice simple effect. It's kind of like a fluid motion where we use curved radiuses or radii, whatever you want to call it. But it's quite popular recently with gap websites, and I thought I'd show you how to create this using custom Gap code. I hope you like it. If you do, please don't forget to give this video a thumbs up, and please subscribe if you haven't already. And we'll be back again very soon with a new video. Thank you very much.
