Create Awesome Perspective Effects with Motion.page/GSAP for WordPress 🔥
Introduction
In this tutorial, Luke Allen showcases a creative technique for implementing 3D perspective card animations in Oxygen Builder. The tutorial focuses on creating an engaging visual effect where cards flip into view as the user scrolls down the page. Luke provides a step-by-step guide on how to achieve this dynamic effect, emphasizing its simplicity and the potential for customization to suit different web design needs.
Steps
Setting Up the Page in Oxygen Builder:
- Create a New Page: Begin by creating a new page titled "Perspective Cards" in Oxygen Builder.
- Import Necessary Sections: To expedite the process, import essential sections such as a hero section with a slider, a section for the cards, and an additional section like a newsletter for extended scrolling.
- Arrange the Cards Section: Place the main focus, the cards section, between the hero and the additional section to ensure visibility during the scroll animation.
Configuring the Card Layout:
- Set Up Parent Container: Use a parent container with a grid layout consisting of four columns to house the cards.
- Create Card Divs: Within each column of the grid, insert div elements that will serve as the cards.
- Prepare for Animation: Ensure the setup is suitable for animation in Motion Page, possibly adding specific classes for better targeting in Elementor.
Animating Cards with Motion Page:
- Create a New Timeline: Open Motion Page and set up a new timeline named "Perspective Cards" with a scroll trigger.
- Configure Scroll Trigger: Adjust the start and end points of the animation using the scroll trigger settings, focusing on the card's position relative to the viewport.
- Animate Card Rotation: Apply a 3D effect by transforming the perspective and rotating the cards on the x-axis, creating a flipping motion as they come into view.
Enhancing the Animation:
- Stagger the Card Animation: Implement a stagger effect to animate cards sequentially rather than simultaneously for a more dynamic appearance.
- Target and Animate Images: Add a separate animation node for images within the cards, starting them in black and white and gradually bringing them to full color as the cards animate.
- Refine Animation Speed: Adjust the timeline settings to control the speed and smoothness of the animation, ensuring a visually appealing transition.
Conclusion
Luke Allen's tutorial provides a clear and accessible method for creating visually striking 3D card animations in Oxygen Builder using Motion Page. The process is broken down into easy-to-follow steps, allowing designers to implement an interactive and engaging element into their web designs. This tutorial not only enhances the aesthetic appeal of a website but also encourages user interaction through its captivating scroll-triggered animations.
Video transcript
Hi guys, welcome back to the channel. My name is Luke, and today I'm going to be bringing you another simple tutorial. This tutorial is going to include some cards, and as you scroll down, they will flip into view, as though it's kind of using a 3D perspective. Here's what it's going to look like.
[Shows example]
Okay, so as you can see, I have a slider here. The main focus of today's video is the next section with the cards. So, I'm just going to scroll down here, and we have these cards coming in like this, and then a basic CTA. So this is what we're going to be working on today. It's quite simple, actually, and let's get right into it.
All right, so I've just gone ahead and made a page here called perspective cards, and I'm just going to edit this with Oxygen. First, what I'm going to do is import some sections to make this process a little bit quicker. Once again, this is a tutorial on motion page and not so much design, but I will show you how this section is made up.
So first, I'm just going to import a hero section here and use the slider. Now, below this section, I want to add our cards, the cards that we're going to be working on today, and this is under people here. Okay, and finally, what I want to do is just add another section just so that we can actually scroll past these cards to see the full animation take place, and I'm just going to add this one here, newsletter.
All right, so I'm just going to save this and show you how this looks on the front. So we have this hero section here, which is a slide cycle through these. This is the main section that we're going to be working on, these are just the cards here, and then we just have a basic CTA here.
Okay, so let's just have a quick look at how this is made up. So here we have a parent container, and this is just consisting of four columns using grid. Within these columns, we have the cards. So these are just divs, and we can target in motion page, we can target this parent here, the wrapper, and then we can target everything within it. I'll show you how to do that with a selector in motion page, but for now, this is all we need.
So this is quite a basic setup, it's not difficult to create this kind of design. If you are using Elementor, it might be better to actually add a class to these cards, just something like a card or staff card, because I know Elementor likes to produce a lot of divs in the DOM. So the way I'm going to do this today with my selector might not work in Elementor, I'm not sure. But if you are using Elementor, once again, just make sure you add a class to each card, and then in motion page, you can just target that class, and it'll be much easier.
All right, so just going to save this once again, and I'm going to go ahead and open up motion page. So what I need to do is go ahead and create a new timeline, and I'm just going to open up the page that we created, which was this perspective cards.
All right, so here's the page here, and all I need to do is just give this timeline a name, perspective cards, and this animation wants to be on scroll. So let's change the trigger here to scroll trigger. Now, I do want to lock this to the scrollbar, and I'm going to leave the delay to 1 second, actually, just to give it kind of a lagging effect.
And now what I'm going to do is I'm going to say I want it to start when the first element's top, so that's going to be the card top, reaches this green line here, which is currently at 85%. Now, I think that's okay. So as soon as the green line is around here, the animation is going to start. You can see it's touching the top of the card there. And I want the animation to finish where then the top of the element reaches the red line.
Now, I'm going to move the red line up just a little bit. I'm going to move it up to around 5%, and I want to make sure that this is also selected to top. So the top just means this part here, if this is bottom, it would be this part here.
All right, so that's the setup for the scroll trigger there. So next, what I want to do is animate our cards. So like I said, what I'm going to do is I'm going to select our scanner and use the parent wrapper, so that would be this one here. I'm going to select this. Now, we don't want to animate this; we want to animate every single div inside of it.
So all I'm going to do is right-click on this, click on edit, and I'm going to use this symbol here. This targets the closest child, and then I want to target every child within it, just by using the asterisks there. So now, when I hover over this, you can see it's selecting the first instance, which is the card, and that's what I want.
All right, so what we need to do is we want to give this a 3D effect. Now, in order to do this, we need to use transform, perspective, and also change the rotation on the x-axis. So I'm going to go to custom here, and I'm going to use the transform property, and then in here, I want to do perspective, and I'm going to use a value of 2,000 pixels, not 200, sorry, 2,000.
And we also need to rotate it on the x-axis. All right, so it's actually going to flip down like this, and you'll see this in a second. Rotate on the x-axis, and we want to do it by 90 degrees. So you can see how they have kind of fallen down, as though the top of the card is falling backwards. And you can see it more here.
So as I scroll now, all right, so you can see it's not quite desirable at the moment. So what we'll need to do is on the two, I'm just going to copy this value here and just make sure that we're setting it to zero. So transform, copy and paste that, and change this rotate to 0 degrees. And this gives us a much better effect here now.
Okay, cool. What I want to do next is I want to stagger this. So instead of the whole line animating like this, well, actually, they're all animating at the same time because we're using this selector. I'm just going to go here, make sure you're on the two, and I'm just going to click on stagger. I'm going to change this value here to amount, and I'm going to change this to 5 seconds.
So now, you can see, as they animate in one by one like so. I'm also going to change the ease to none, just it's a little bit more linear, and that looks much better. Yeah, that's good. I don't want it to animate too slow, so around the bottom there, where the green line is, I think that's a perfect value. So that's looking pretty good.
The next thing I want to do now is target the pictures inside. So now, what I'm going to do, I'm going to add a new node here. I'm going to move it here like this, and now I just want to target every image.
Okay, so what I'm going to do is I'm just going to copy this selector here. We can use this, so just copy, press enter, once again, and go here. So now, what I want to do is I want to just target every image within this container here. So all I'm going to do is I'm going to use the container ID and then just type image, and that's going to target every image inside of this parent container here.
All right, now what I want to do with the images is I want them to start out black and white. So let's do that first. On the from, we can go to filter, and then saturate, we can put this to 0%. All right, so they're going to start black and white, as you can see. And then on two, I just want to make sure to put them back to 100% saturation.
And just like we did with the cards themselves, we want to stagger them as well. So let's put this to the same value of 5 seconds. So now, when I scroll, as you can see, the card comes in, it stands up vertically, and then only after that, the color of the images come into play. So this is just slightly colored, this is still black and white, now this is fully colored, fully colored, black and white still, and just like that.
So I think that's pretty cool. Now, if you want this animation to last a little bit longer, all you need to do is just change this to a lesser value. So, for example, let's do minus 20, and that should animate in more slowly now, as you can see. And I think that actually looks, it feels better anyway.
So I'm going to save the timeline and view this on the front end. Okay, so I'm just going to scroll down here, see these are animating in quite nice, very cool. Let's just get a more smooth scrolling experience here. Yeah, nice.
So, a very simple effect there, as you can see, using perspective and rotation, and we're also using the filter. So just with those three things, this is the kind of things you can achieve with motion page.
So there you have it, guys, just a simple tutorial for the new year 2024. Happy New Year, by the way, from all of us at motion page. We hope you like the video. If you did, please give it a thumbs up, and don't forget to subscribe if you're not already, and we will be back with another video very soon. Thank you very much.
