Gold Penguin Logo with Text

Motion.Page Introduction in Breakdance Builder

Level up your site’s user experience by creating custom animations with Motion.page. This guide will show you how easy it is to add them in Breakdance.
Updated October 1, 2023
Motion.page in Breakdance
Motion.page in Breakdance
Difficulty: Easy. Might help to know the basics of this tool/topic
Time Required: ~20 minutes

Are you feeling limited to boring entrance animations or fading parallax effects?

If you want to level up your site’s user experience, you might be considering adding custom animations.

But traditionally, they’re not that easy. It involves custom JavaScript codes and animation libraries. And it might not be fun at all!

At least that’s until Breakdance with Motion.page came along.

With Motion.page, you can:

  • Add custom animations without coding
  • Animate page elements on page load, on scroll, mouse hover, or on click
  • Create advanced and cool animations to add interactivity to your site

On top of these features, Motion.page allows you to preview your changes in real time. You can experiment with the different effects and settings as you go. For me, this makes web animation fun and easier.

In this guide, we’ll explore how to use Motion.page with Breakdance to make your site feel more engaging. Let’s go!

motion.page in Breakdance

Using Motion.Page to Add Animations in Breakdance

For this simple demo, let’s try to animate texts by infinitely changing their color on page load. Here’s what you need to do:

1) Create A Breakdance Page

Add elements to your page. In this tutorial, I’ve already created the header and page template, and added some text, as shown below.

motion.oage in Breakdance

2) Install Motion.page

Download the motion.page zip file once you’ve made your purchase.

Next, navigate to Plugins > Add New on your WordPress dashboard. Click 'Upload Plugin', select the downloaded zip file, and install. Then, activate the plugin.

3) Open Motion.page

Once activated, you should see ‘motion.page’ on the left side menu of your WordPress page. Click it to open the editor.

add motion.page in Breakdance

4) Select A Page to Edit

Once you’ve opened the motion.page editor, you’ll be asked to choose a page to edit. Click the drop-down menu and choose a page, as shown here.

choose a page to edit in motion.page

Note: Another way to open your page in motion.page is to simply navigate to Pages > All Pages. On the page list, hover over the page you want to edit and click ‘Motion.page.’

open page in motion.page

Your editor should now look like this. Your page is displayed at the center of the editor. You can add animations to each element by clicking them.

motion.page editor

On the left side, you will see two different tabs - one for the Builder and the other for the Library. For this tutorial, we’ll add animations under the Builder tab.

At the bottom of the editor is the timeline section which is a bit similar to the one you can see in video editors. There are also buttons for play, loop, and play forward or backward.

5) Set the Trigger

In the left panel, choose how you want the animation to start. The options available are: 

  • Page Load  
  • Page Exit
  • ScrollTrigger
  • Click
  • Hover

For simplicity, we’re going to select ‘Page Load.’ This means the animation will take effect right away on page load.

choose page load as trigger

6) Select An Element to Animate

Go to the Animation tab and use the animation selector. Hover over and click the element you wish to animate. In the pop-up, choose the class name of the element.

use animation selector

7) Select Visual Effects

In the visual section, choose an animation effect you want to apply. In this example, we want the text to change its color infinitely. So, let’s choose ‘Text Color’ and choose a color that we want.

add text color as visual effect

8) Choose Element Behavior

In the functional section, select how the visual effects will behave. 

In our case, let’s add the 'Split Text' option to apply effects to each character individually. 

add split text in motion.page

Use the 'Stagger' option to animate characters sequentially with a 0.05-second delay. Set the repeat option to -1 for infinite animation.

Then, enable the ‘yoyo’ option to run the animation back and forth, as you will see later.

9) Set Breakpoints

If necessary, set specific breakpoints for the animation by adjusting the selection under the 'Enabled breakpoints' section. 

In this example, we’ve enabled the animations for all devices.

enable breakpoints in motion.page

10) Save and Preview

Click 'Save Timeline' once satisfied with the setup. Open your page on the front-end to preview the result.

Here’s what our final page looks like.

motion.page font effects

Sample Project - Animate A Multi-Step Form in Breakdance 

In this tutorial, we'll add a subtle blinking glow to an active step in a multi-step form. This simple enhancement can guide users and elevate the design of your form. 

This project is very simple, but I find this very helpful to guide users through the steps. Plus, it improves the aesthetics of your form.

Here’s how to do it.

1) Create a multi-step form in Breakdance. Add the elements such as a form builder, headers, and texts. 

create a multi-step form in Breakdance

If you’re not sure how to create a multi-step form in Breakdance, we’ve created a separate tutorial for that. Make sure to check it out.

In this example, I’ve created a form where users can upload and convert their files.

2) Open your page in motion.page. 

open page in motion.page

3) Choose a trigger. Here, I’ve chosen ‘Page Load’ because I want the step buttons to animate continuously upon page loading.

select page load on motion.page

4) Use the animation selector to select the button element to animate.

use animation selector in motion.page

5) For the visuals, I’ve adjusted the opacity and scale to get the desired glow effects of the button, as shown below. Feel free to experiment with these values to achieve the results you want.

add visual effects in motion.page

6) In the functional section, click ‘Stagger.’ Play around with the time delay values and how you want the animation to start.

add motion.page stagger and repeat values

Enter a -1 value under ‘Repeat’ for an infinite loop.

Use the play button in the timeline section to preview the effects, and adjust as needed.

7) Once you’re satisfied with the settings, click ‘Save Timeline’ and preview your page on the front-end.

Your form should now look similar to this.

add animation in motion.page

What’s Next?

You’ve just learned how to create simple animations in Breakdance using Motion.page.

Mastering the animation effects in Motion.page might take some time. I highly recommend you experiment with the different settings available to refine your transitions.

If you want to try other plugin extensions in Breakdance, make sure to check out these tutorials:

By using custom animations with Breakdance's vast libraries, you can enhance your site’s visuals and user experience. So, go ahead and give it a try!

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross