Can you Target and Animate Attributes with Motion.page? - GSAP/Motion.page - WordPress
In this tutorial, Luke demonstrates a practical approach to using Motion Page with Bricks Builder to style and animate elements based on custom data attributes. While Motion Page doesn’t support direct data attribute selectors, Luke walks through a clever workaround using CSS custom properties (variables) in the root and assigning those styles conditionally using attribute selectors. The tutorial provides a simple but effective solution to target specific elements dynamically, extending the flexibility of animations beyond typical class or ID-based selectors.
Steps
Setting Up the Page in Bricks Builder:
- Create a New Section: Begin by creating a new page in Bricks Builder and adding a section containing a heading element.
- Add a Data Attribute: Assign a custom attribute to the heading (e.g., data-attribute="Luke") to simulate dynamic targeting.
- Apply Classes and Prepare Layout: Keep the structure minimal to focus on the technique and prepare for CSS and Motion Page integration.
Configuring the Data Attribute Styling:
- Define Root-Level Variable: In your global CSS (e.g., using WPCodeBox), declare a custom property in the :root selector for the specific attribute, such as --da-data-attribute-luke-bg: blue;.
- Target Attribute in CSS: Use an attribute selector like [data-attribute='Luke'] to apply a style (e.g., background color) using the defined variable.
- Ensure Visual Feedback: Set the background color using the variable so the element visually reflects the intended style change.
Animating with Motion Page:
- Create a New Timeline: In Motion Page, create a new timeline (e.g., “Data Attribute”).
- Configure the Custom Property: Use the “Custom” property section in Motion Page to animate the custom variable (e.g., background color) from blue to red.
- Select an Animation Scope: Since attribute selectors aren’t directly supported, apply the animation to the body element as a global scope. This will still work as long as the variable is uniquely applied to the targeted element.
Enhancing the Animation:
- Avoid Overlap with Other Variables: Ensure each custom property name is unique to prevent unintentional targeting of other elements.
- Control the Trigger Behavior: Configure the animation trigger, such as “on page load,” to demonstrate the background color transformation clearly.
- Debug Visuals: Use the front-end preview to confirm that the specific data attribute element responds to the custom property animation as expected.
Conclusion
Luke’s tutorial offers a clever solution for targeting data attributes in Motion Page through CSS variables and custom selectors. While not natively supported by Motion Page’s selector system, this method opens new possibilities for more dynamic and granular animations. By following these steps, designers can animate elements tied to specific data attributes without relying solely on classes or IDs—making their animations more flexible and scalable across different components.
Video transcript
Hello guys, welcome back to the channel. In today’s video, this is going to be a very quick one, but we did have a customer asking if we can target data attributes in Motion Page. Now, although you cannot use a typical selector in Motion Page to target an attribute specifically, what we can do once again is use variables in the :root and then target those specific variables within Motion Page. So let me show you how to do that.
So here I’ve just set up a new page in Bricks. I’m just going to add a section, and then I will add a header here. On this header, we can add an attribute down here and I can call this anything that I like. So, for example, I’ll just call this data-attribute, and I’ll give it a value of “Luke.” I’m going to save that.
Then what I’m going to do is, using CSS—so here I’m using WPCodeBox—I can do :root and then I can create a unique variable. So let’s say, for example, I want to change the background color on this element with this data attribute. Okay, so what I can do is create my own variable called --da-data-attribute-luke-bg. So I know it’s the data attribute with the value of “Luke” and then something meaningful—for example, “bg.” And then let’s do “blue,” for example.
What I can do next is apply it to that element using [data-attribute='Luke'], and here’s my selector to apply the initial variable. So once again, this is going to be background-color, and I will use my variable. Alright, so I’m going to save this one. I’ll also save this, and let’s see it on the front.
So as you can see, this element—I’m using the selector here to target the element with the data attribute of a value of “Luke,” and then we are applying our variable created in :root.
If I go to Motion Page now and create a new timeline, I’ll just call this “Data Attribute.” We’ll go to our new page. So here you can see we have our element.
Let’s say I want to change the background color since that’s the main focus here. Then I’m going to go not to background color—what I need to do is go to “Custom.” Now, remember we created this unique variable on purpose because this is only being applied to the element with this data attribute, right?
So then we can now tag this one in Motion Page using the property here. So it’s going to go from its original state, which is blue, and then let’s say I want it to go to red on page load.
Now, the problem is we have not selected an element for the actual animation, so Motion Page requires something to go here. Right now, what you could do is just use “body” so it’s going to target every variable here inside the body.
Now this is okay—for example, I’ll show you, it does work. This is okay, for example, if you’re not using an opacity here from zero to one, because that’s going to do everything on the main body selector. So as long as you’re creating unique variables all the time and only targeting those unique variables here in custom, then this should be completely okay.
So, save timeline, and then let’s take a look on the front end. If I hit refresh, you can see now we are targeting the variable which is only applied to this element with the data attribute found here.
So I hope that makes sense, guys. Please feel free to leave a comment below if you need any clarification. This was just originally going to be a quick response to a customer, but basically yes, you can—in theory—target data attributes. But it is a little bit convoluted because we do have to make these variables, but it does work. So I hope that helps, and once again, thank you for watching and I’ll see you guys in the next video. Thank you.
