Motion.Page Introduction in Breakdance Builder

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!

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.

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.

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.

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.’

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.

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.

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.

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.

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. 

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.

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.

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. 

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. 

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

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

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.

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

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.

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:

• Elements Hive In Breakdance Builder – Some Examples
• How to Use Windmill BDD Library in Breakdance
• Destiny Elements Breakdance Builder Review: Build Faster

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!