Make Killer Animations like Apple Using WordPress and Motion.page!

Hi guys, Luke here with Motion.page back with another video. Now, finally, I am bringing the Apple video that I promised. So, if we go to Apple's actual website now, they do have this nice page advertising the MacBook Air with the M2 Chip, and this is for the 13 inch and 15 inch displays. So, as you scroll down on this page, you'll notice that we have this text here, and it zooms in, and as it zooms in, there's an image sequence there. Now, I'm actually having some performance issues, um, but you get the idea. It plays the image sequence, and then this pinned element unpins itself, and then you get this text fading in, and you get the idea.

So, I would like to create something similar today, not exactly the same, but it's going to be pretty similar. We will have a zooming effect on a title as you zoom in, we'll go into an image sequence, and then we'll fade out the image sequence and go to the next section where we will apply some basic animations to the text. So, here's how I would do this using Oxygen Builder.

So, I'm going to go into this quite raw. Uh, what I'm using today is just an Oxygen sandbox, and I've just set it up. There's no templates or anything like that. So, all I've done so far is installed Motion Page and a font plug-in as well. So, what I'm going to do is create a new page. So, call this, uh, Apple, and I'm not going to render a template because I don't have one. I'm going to publish this and then edit with Oxygen.

And first, what we'll do is just set up our main elements in here. Okay, cool. So, first, what we'll need is we'll need to create a pin, and to do that, all I'm going to do is add a div here, and I'm going to use this as our pinned element. So, I'm going to call this pin, like that. I'm also going to give this an ID, so I'm going to rename this ID to Apple pin one, just in case we use more than one. I like to suffix this with a number.

Inside this pin, what I want is a section, and this is actually going to be our canvas element. So, I'm going to change the tag here to canvas. So, in order to do that, I'll have to check this and then just call this canvas, like that. I'm also going to rename it here to Canvas. I'm just going to make some changes in here. Before that, I do want to give this also an ID. I'll call this Apple canvas section.

I want this to be 100 full width. I also want it to be full width here as well, height 100 viewport height. I want to make sure that everything is in the middle with this. Next, what I want to do on this pin, I actually want to set this to relative in layout because what I'm going to do with our title section, which is the first text you'll see, is set that to position absolute. So, these are essentially going to overlap each other.

So, what I'm going to do now, create another new section, call this first section. I'm also going to give this ID as well, Apple first section. So, this one wants to be positioned absolutely. I want to make it spam like this, and also for good measure, I'll also set this to 100 viewport height as well, middle align everything once again, so our text will be in the middle. And I want to give this one, um, a bit of a darker background. So, what I'm going to do is just set a color like this.

Now, in this section, what I want to do is add a header. So, you can see it's centered like this because we middle aligned everything. I want to give this, um, a unique name just so we can easily identify everything within Motion Page. Call this Apple header one, like that. And then I'm going to set my, um, my font here to SF Pro, which is kind of like what Apple use. Make this a light color, and I want this to be six REM, and this is going to say MacBook Air 15 inch.

Okay, so let's save this page and let's go to Motion Page now and see what we can do with this. So, I'm going to create a new timeline here. I'm going to call this timeline Apple, and we want to select our Apple page that we've just created. All right, cool. So, obviously, this wants to happen while we scroll, so let's select a scroll trigger. We want to lock it to the scroll bar. I want to turn this delay down a bit. I'm going to use 0.2.

Now, we do have a pinned element on here, so let's select this, and then remember what we called the pinned element was Apple pin one, so that's here. I'm going to leave this as default, and then what I want to say is when the pinned element's top reaches the top, open element to top reaches zero percent, which is the top, as you can see. Start viewpoints now goes to the top. We want the pin to start. So, by default, it's going to be pinned from the get-go, and then we want it to end when the top of the same pin element is off the screen, so let's start with minus a hundred. Now, you can see the scroll bar here; it is moving, but the content is not moving, which is what we want.

Okay, so let's add an animation. First, because we only have this text available to us right now, we'll just go ahead and select this text. As you can see, it's picking up our ID here, so we'll select this. What I want to happen is, as we scroll down, we want this text to kind of scale up, so it looks like we're going to zoom into the K area here. So, I'm going to go to 2, and then what I want to do is go to custom transform, and then I want to do a scale of 200. Let's spell transform correctly. As you can see, it looks pretty good now. Just a couple of issues, obviously. First issue is, as I scroll in towards the end, it's slowing down, and the simple fix for that is just change ease to none, so now it's going to be much more linear. And then also, it's kind of off-center, so we'll also need to change the translate X. So, on the two here, we'll translate it on the x-axis, and let's use pixels for now, and let's go minus 500, see what this looks like. So, it is better. Let's double that to a thousand. So, you can see now it's much more centered with the main part of the K there. So, I'm going to try maybe 800 here. Yeah, I think that's good enough for my needs. So then, what I want to happen next is, as we get towards the end of this pin, so towards the end here, around this section, I want to add a new animation node. And then what I'm going to do is, I want this whole section to fade out. So, I want this section here, the first section, to fade out, so that then we can see the pinned element underneath. So, I'm going to target this one, and then two, because this is quite short, so it's only going to start from here, opacity, and we'll go to zero.

So now, as I scroll down, now you can't see it because the section underneath is white. So, what I'm going to do is save this timeline. For example purposes, what I'm going to do is hide this, and then the canvas underneath, I'll give it a background color, background color of, let's say, red or pink, like this, just so you can see what's happening now in motion page. So, when the pin reaches that, you can see it's actually fading out, and then it's going to show us the pinned element, also the canvas underneath. So now, we'll need to add another node, and I'm going to make it happen around the same time. And now, what I'm going to do is, on this, I'm going to target our canvas. Be sure to hit enter. Now, you can't see it's highlighting because it is underneath. Oops, sorry, I didn't mean to delete it. So, on this one, on the from, let's go down here, and we'll go to image sequence, and I want to do transcode video. So, I've prepared this video. Now, the way I made this video is basically, I just found this on YouTube, and I used a website. I'm not going to name the website, but there are many out there. You can just search, for example, Google like YouTube to MP4 or something like that. And then, what I did, after I downloaded the video, I edited the videos to make it shorter, just so I have the video that I need for this example. So, I'm going to leave everything here. I'm going to increase this to 10, and I'm going to transcode to images. Okay, so image sequence uploaded, as you can see, we now have it here as well. So, I'm just going to leave this as default for now. Let's see what this looks like. So, already, as you can see, that looks pretty good. Now, the quality maybe is not the best, so I did have two videos available here. Now, I did upload the wrong one. Now, I was just going by size because typically, the biggest size is the better quality, but I did actually compress a higher resolution version, which is this one, 1080. So, I'm going to use this one instead.

So, this one should have to be a better quality. So, I'm going to go ahead and transcode this one once again. Okay, so this is our new video now, which has been applied automatically. It looks much better, way less pixelated. Okay, so already looking pretty good. So, we're zooming into the MacBook here, and then that's going to fade out right there, and then it's going to go into our image sequence like this, very nice. So then, I'm going to save this timeline and just take a look at this on the front end. Okay, so that's pretty fast, actually, I'm zooming there, and that's really fast, the image sequence looks pretty good. So, all I'm going to do, and this is happening because of the admin bar, I believe, so what I'm going to do is just open this in incognito. Yeah, so just because of the admin bar, we're getting that strange mini scroll. Yeah, it looks pretty good. What I'm going to do in order to fix that really fast stat is, we just increase the value here. In this case, make it more negative, so minus 200. I'll save that, and this time, it should actually be much slower. Yeah, it is much slower. Well, it's still pretty fast on my first click there. All right, but let's continue here. So, what I'm going to do next is, I want to add a section underneath all of this. So, I'm going to go back to oxygen here, and underneath our pin, let's add a new section here. So, section, and then I want this to be a hundred port height, like that.

So, save this, and then we'll put some more content in here as well. So, I'm just going to refresh the front here, and I'm just going to scroll down. There's our image sequence, which looks really nice, and then we go to the next section. Now, we are having a strange issue here that should not be happening. If I go to Motion Page and refresh, let's just see. Okay, it's happened. Oh, okay, so I've just realized why this is happening. The reason this is happening is because we're scaling up this text by quite a large number. It's still scaled up, but then once the pinned element is finished, then what's happening is that scaled text is now technically taking up all of the space, which is the reason why this has become so large. The best way to fix this is simply go to Oxygen here, and then on your pinned element, just make the overflow hidden. Overflow hidden, and that simple trick should fix that issue. So, let's just test that. So, refreshed, scrolling down, yeah, perfect. If you think about it, the only thing we did to that text was change the opacity to zero, so technically it's still taking up all of that space.

Now, another thing I don't like is this thing here. So, what I'm going to do is just grab my Color Picker here. I'm going to grab this color, and I'm going to copy this, and I'm going to make this section the same color, just so it looks a little bit more smooth. Save that, refresh this one more time. Okay, so another thing I don't really like is this snapping effect here. So, what I'm going to do in Motion Page is, I'm gonna go to our canvas section, and then I'm going to add a new node. So, let's just check this first. So, as I scroll down, around here, I want it to fade out nicely. So, let's create another node. Key is fine, and then up to here, I'm going to use the same ID. So, Apple canvas section, enter, and then what I'm going to do is two of positive zero, so it just fades out towards the end like that. Perfect. So, now we can actually change this section back to white. Let's go back here, Oxygen. Okay, so we can now get rid of this, and this should look much smoother. So, I'm going to scroll down here, image sequence fades out, and now we're into our new section. So, that looks pretty good.

Cool, so now let's work on our new section here, and rename this one to Apple second section. Save that, and now we can add some elements in here. So, if we go to Apple's website, we can see that they kind of have just some nice simple fade-ups with the text there. So, let's create something similar. Let's just do a header and a tag kind of in the center. So, let's middle align everything. Actually, that's going to be left. Then in here, let's add a heading, and I'm just gonna use the same font. So, as the same text here, Japanese text, and then under there, we have a text element. And then what I'm going to do is, I'm going to wrap these like that. Do like this. So, I'm just gonna very quickly add a Google font which supports Japanese text. Okay, cool. So, uh, I'm just going to set this to inherit and make sure the parent is on yes. So, I'm just going to play around with the sizes here. So, pull up the three REM, and then I'm going to put this to 1.2 REM. So, what I'm going to do for this example is, I'm just going to use one class. So, I'm going to apply a class that we can use globally in Motion Page, and we'll call this class something like MP Fade up. So, I'm going to add a new class here called MP, MP Fade up. Let's keep it lowercase, actually. And I'm also going to apply that to this one as well.

Alright, so what I'm going to do now in Motion Page, make sure this is refreshed. I'm going to create a new timeline. I'm going to do it here. This is going to be called Fade up animation. I'm just going to pull in our page so we can see it, but we need to select this one because this is going to be a global animation. This also wants to be a scroll trigger. Okay, so let's focus on this. So, like I said, we are going to animate this class, MP Fade up. So, it's going to go from opacity zero. Just make sure to save Oxygen Builder here. Okay, so now you can see, uh, we also need to lock this to the scroll bar. So, you can see the opacity is fading in when it reaches the stats. Now, I want to bring these two closer together. That's the reason I made a new timeline for this. So, what I'm going to do is put this to around 65, just a little bit closer together. Now, if I want it to start earlier, I would just bring these two down. So, let's do that. We'll do 15 and then something like 35. Sorry, that would have to be the opposite. So, let's do 85, 65. So, it's going to happen much sooner. Now, this might look better actually if it's not center aligned, but it's more at the top. So, in Oxygen, what I'm going to do is do top like this, and then go back to Motion Page. So, you can see there's less time between the image sequence finishing and seeing the text, which is much better.

Now, one more thing, we want it to fade up a little bit. So, we'll also go back to the same node here, and we'll do Translate from, and let's give the y-axis a positive value. So, the positive value is actually pushing the text down more than its default state. I'm going to set this to be none, just so it's a little bit more linear. We can see what's going on easier. Now, the reason it's happening so fast is because I've made a small mistake with my values. Now, what I'm saying is it starts on the green line and ends on the red line. We need to switch those two around. So, that's my mistake there. So, we'll change this to 85 and 65. So, now it's gonna look much more like what I wanted. Now, I don't want them to come in at the same time like that. The reason that's happening is because they share the same class. So, if you attach the same class that you want to animate to two different elements or more, now you'll want to make sure that this one is selected, so that they're independent of one another. And that looks much better now, much better. I'm going to scroll down here, fades out, and our text now fades in like that. Pretty cool.

And one last thing I want to do is, I just wanna duplicate this one, and what I'm going to do is, I'm going to put it outside of my text wrapper, and make sure my section is set to this one. Now, I want to put here, and then all I'm going to do here, 15 inch, I'm going to change this text back to SF Pro, change it back to 6 REM, and then I want to put this in the middle. So, all I'm going to do for that is just do Auto, also imagine top, maybe around 150 pixels. Now, remember the same class is still applied, so the animation should automatically work. And once again, because this is checked, it should be independent. So, refresh, scroll down, scroll down, there's our text. Cool. Now, this one's not finishing because we're not able to scroll past the end trigger. If you have a footer, then obviously that should work no problem. But if I just add a new section to the bottom there, just to give it a little bit more space, so it can actually finish.

So, just a couple of things, uh, this 15 has kind of a nice yellow. So, what I'm going to do is grab our color eyedropper, try and select this orange-yellow, and let's just apply that to the 15 inch here, and we'll also do it on this one as well. Save, and then let's just give this one more look. MacBook Air 15 inch. Okay, so that title is a little bit bigger than mine, but that's fine. And I'm starting off with a dark background because the image sequence has a white background, and I wanted to zoom into the white text. So, kind of makes, so we're zooming in there, image sequence plays, that fades out, we come into our new section with our text like that. Now, it's not very obvious that it's translating up. So, what we could do instead is also add, for example, just a small value here as well, 30. It's going to be a little bit crazy, but actually, it doesn't look too bad. And one final thing I want to do here is just make this, uh, 50, uh, height, and then this could be, so obviously, like I said, this could be, for example, a footer or something like that, with many links in here. F5. Okay, and obviously, I forgot to save Motion Page. So, we'll save the timeline there, refresh. Nice.

So, there you have it, guys. This is, um, using image sequence, something a little bit similar to this style here, not exactly the same. I'm also having performance issues on Apple's website, but yeah, you get the idea. So, we're using here kind of a scaling effect into the text that fades into the image sequence. Now, they have a nice example because their image sequence kind of zooms out, which allows you to go to the next section anyway. So, that's really nice on their part. Now, we cheated a little bit because we just, um, we faded out the image sequence and then went into the next section. I think that works nice as well. And then we've also applied some animations to the text, showing you an example of using a class globally, and then also reusing that class across different elements, which means you would then have to also make sure that this one is checked here, trigger each iteration individually. There you have it, guys. Thanks for watching. Hope you liked this video. It's been a very popular request. Obviously, Apple makes some stunning web pages. This is how I would go about making something similar to their pages. If you liked it, please give us a thumbs up, and don't forget to subscribe, and we'll be back with another video next week. Thank you very much. Thank you.