Start Animating Your Pseudo Elements!

In this brief tutorial, I'll demonstrate how to edit your pseudo elements effectively. The key to achieving this is by utilizing variables in lieu of direct CSS properties and animating these variables directly within Motion.page. Watch the video to see this technique in action!

Introduction:
Hello, this is Luke with Motion Page. I apologize for the delay with this video; I've been under the weather and we've been busy with a new plugin. Today, we're diving into animating pseudo elements, a topic many of you have requested.

Overview:
With Motion Page, we don't animate the pseudo elements directly. Instead, we attach variables to the CSS properties and animate those variables. Let's dive into how this works.

Setting Up:

  1. I've set up a page in Oxygen Builder for demonstration.
  2. Let's create a new section and add some text. For this example, we'll use a link with a tag and aim to animate this tag using an "after" pseudo.
  3. Name this link "example link".
  4. Assign a class to this element, let's call it "MP-foreign-primary".

Creating the Pseudo Element:

  1. On the "after" pseudo, add our tag, for instance, "tag one".
  2. Make necessary style adjustments, such as padding.
  3. Center everything using Flex on the parent element.

Animating the Pseudo Element:

  1. Instead of defining a direct color, add a variable. For instance, use "mpbg color" for the background color.
  2. In Motion Page, create a new timeline named "pseudo animations".
  3. Select the parent class, as the pseudo is attached to this class.
  4. Instead of directly animating the background color, use the custom property with the variable we defined.
  5. For demonstration, let's animate the background color from blue to red on page load.
  6. Similarly, animate other properties like text color or space between text and tag.

Finalizing & Testing:

  1. Duplicate the section multiple times for varied examples.
  2. In Motion Page, ensure each animation triggers separately for a more dynamic effect.
  3. Adjust the spacing between elements as needed.
  4. Test the animations on the front end to ensure they work as expected.

Conclusion:
Animating pseudo elements is straightforward with Motion Page. The key is using variables for values, which we then animate. I know I promised an Apple animation tutorial in our previous video, and I'm still working on it. Please stay tuned, subscribe for more, and we'll be back with another video soon. Thank you!

Video transcript

View full
Hide

Hello, guys, Luke here with motion page. Apologies for the delay with this video. I've been a little bit sick, and we've also been very busy with a new plugin. But in any case, here's the video.

Today's video is actually going to be animating pseudo elements. Now this has actually been a very popular request, so I thought I'd just make a very quick video on this today. Now, with motion page, we don't actually animate the pseudo itself. What we're actually doing is attaching variables to the CSS properties, and then with motion page, what we can do is animate that variable. So let me show you how we can do this in motion page.

Okay, as you can see, I've made this page in Oxygen Builder, and I'm just going to set up an example for us here. So let's make a new section. I'm going to add some text, and let's create one of these, like this, so an example link with a tag, and then we'll try to animate this tag using an after pseudo. So I'm just going to call this example link, and then what I'm going to do is I'm going to give a class to this element, and let's just call this MP for motion page, foreign, primary, and then we'll make our edits on here.

So what I'll do first is on the after pseudo, this is where I'll add our tag. So let's just say "tag one," for example, and I'm going to make some edits here, give it some padding as well, and then one last thing I'm going to do on the parent here, I'm just going to center everything using Flex, okay, like that, and I'm actually going to put this to zero.

So, could actually just erase those like that. Okay, cool. So here's our tag, and this obviously is using the after pseudo. So let's say we want to animate this. A good example first will be to animate the background color. So what we'll need to do is on the pseudo itself, instead of defining a color like this, what we can do instead is add a variable. So if I go to WP code box in my root, I'm going to add this variable, which is mpbg color. So it's "motion page background color," and it has a value here. So I'm going to copy this and use this in Oxygen. So variable, write it like this. So it's not reflected in the Builder, but it should be reflected on the front end. So I'm just going to save it and have a look on the front. Save this one as well. Make sure that's it. There we go. So you can see it's reflected. Now, since we have a variable, now I'll show you how we can animate this in motion page.

Create a new timeline. It's going to call this "pseudo animations." I'm going to select my page here. So what we'll need to do for the animation selector is just select the parent, and I'm going to use the class that we've just used because my pseudo is actually attached to this class. So make sure this one is selected here. I'm just going to change this as well, for example, scroll trigger, lock to scroll bar, for example. All right. So if we go down here now, remember we added a background color, but this is not going to work because if I had a color here, it's going to add to the whole element, as you can see if I use red.

So yeah, you can see the red is being applied here. It's very faint because we need to scroll down to see it. So if I use two instead, background color, select red, so you can see it's going from nothing to red. That's not ideal. We don't want this. What we need to do is use custom, and then in here, we can just use the variables that we've made. So minus the brackets here and the variable itself, just like this. So this is how we tag it. And then if I just say, for example, red, now what's going to happen is it's going to go from blue to red. Essentially, guys, this is how you animate your pseudo elements.

So let's say instead of scroll trigger, on page load, you'll see it go from blue to red like that. So let's say we want to add another animation. So obviously, with the red color, it's difficult to see the text. So let's change the text color. So we could just do here, specify MP text color, and let's say, let's just give it an original color of black. Now, back in Oxygen, we'll have to go to, to make sure you're on the after pseudo here, and then on the color, we can use that variable. So if I go back here and just copy this, "MP text color." So that should be black. I'm just going to save WP code box here. So difficult to see, but it did change to a more dark color. So that is working. And then once again in motion page, we'll go down here, add a custom property, which was this one. I will change it to white so we can actually see it on the red background. So let's go from black to white text now.

And one more example here. Let's say we want to change the space between the text here and the tag itself on page load. So you see here we have a value of six. Now, remember, if we want to animate this, it needs to be a variable. So let's go here back to motion page and let's use this one, "MP motion page margin-left zero." Let's give it an original value of six pixels, and I'm going to use this one here in Oxygen. Save this, save WP code box as well, refresh the front. So no change because it's still six pixels, but now in motion page, once again on page load, if we want it to expand, so give it more space, we could change it to something like 10 pixels. So I've just refreshed the motion page here. Now it's very subtle, but it is moving four pixels from six pixels to 10 pixels. Now the nice thing about this is because we're using the parent as the animation selector, we can trigger each animation separately if you're using something like scroll trigger, and I will show you this, just a quick example.

What I'm going to do is I'm just going to duplicate this section a few times so that we have a few different examples in motion page. So as you can see, what's happening if I lock this to the scroll bar as well, so you'll notice as I scroll down, they're all animating at the same time, and in most cases, we don't want that. So we just trigger each iteration individually, and you can see that they're all independent of one another, which is really cool as well. Now, if I just bring these slightly closer together, say 40, 50. So you can see now that they're all starting out blue. Our original styling is applied here, and they're all going to animate separately like this. Pretty cool. Save this, and here's what it looks like on the front as well.

Cool. So there you have it, guys. Just a simple video, but as you can see, animating pseudo elements is quite simple. Once again, the only thing we're doing is adding variables to the values, and that's what we're animating. Now, I did say in our previous video that this video would be like an Apple animation. I apologize for that. I am still working on that page, and I will bring it in the next video, I promise. Please stay tuned, subscribe for more, and we'll be back with another video very soon. Thank you.

100 %