An Introduction to Motion.page

This video is just going to be a basic introduction and overview to Motion Page.
I will be going over the user interface today and I'll show you some of the properties that we can use to animate some elements on your WordPress websites.
We will not be going over every single property today just because some properties and features of Motion Page require a more in-depth explanation.
But don't worry because we will be going over those in future videos.

So, what is Motion Page?
Let's have a look.

Motion Page is a plugin for WordPress which allows you to animate your websites without using a single line of code.
It makes use of GreenSock Animation Platform, better known as GSAP.
Typically when using GSAP on your websites, you would have to type out a lot of manual code in JavaScript.
But thanks to Motion Page, it takes that stress off your shoulders.
It's also a standalone plugin, which means you're not tied to using a specific builder.
You can use any builder of your choice, whether it's Oxygen Builder, Brix Builder, Divi Builder, Beaver Builder, Elementor, Gutenberg, you name it.
You can use Motion Page with all of those.

Let's have a look at Motion Page's website here.
As you scroll down, you'll see some animations taking place.
First, we have a video here with changing perspective.
And then we have elements fading in.
These are some of the trigger events that we can use in Motion Page.
We can also use something called stagger, which is pretty cool.
Let's scroll down more.
Here's a feature called lock to scroll bar using the scroll trigger event.
It's literally locked to the scroll bar and animates as you scroll.
Then we have CSS properties that we can use to animate in Motion Page.
Of course, you can animate these in CSS as well, but you also have the option to use Motion Page, which is much more powerful.
Testimonials, pricing, and FAQs.
That's it!

Now, let's move on to the user interface.
I have created a basic page using Oxygen Builder, and it's set as the front page.
I'll primarily be using Oxygen Builder for these videos, but you can use any builder that you like.
This is what the page looks like, nothing too fancy.
I have made a hero section, features, logos, testimonials, and a basic CTA at the bottom.
I'll be animating some of these elements in Motion Page.

Before we get started, there are a few prerequisites.
First, make sure that in your permalinks, the post name is selected.
Motion Page reads the slugs as just the post name, so this step is very important.
Next, in the reading settings, make sure that you have a static page selected and set your home page.
This is also important.
Now, we are good to go.

Let's open Motion Page.
If this is your first time opening Motion Page, you might be presented with a modal asking for your license key.
Kindly enter your license key, and then you should see something similar to this screen.
I have some timelines already created, but for this video, I'll create a new timeline called "Video Tutorial."

The user interface of Motion Page is displayed.
I won't be going over every single feature today, especially the properties at the bottom.
I'll discuss those in future videos because they require their own video independently due to their complexity.
Today, I'll be going over most of the features here, as well as the triggers that are available to you.

Let's start at the top.
Here is where we name our timeline.
I'll rename this to "Video Tutorial."
Please choose a name that makes sense to you.

Here is where we target the page we want to animate.
In this case, the home page is fine.
If the timeline needs to be loaded on all pages, select this option.
We'll start with page load since it's already selected.
You can choose whether the animation should play before or after the page is fully loaded.
That's up to you.

For this example, I want to animate this text using opacity.
Since I want to see the animation after the page is fully loaded, I'll choose "After Load."

Next, we have the animation selector.
We can type in IDs or classes.
Just make sure to use "#" if you're using an ID and "." if you're using a class.
The easiest way to select would be to click on the animation scanner, select a scanner, and then it will bring up the selected element along with its IDs and classes.
Since I want to animate the whole block, including the buttons, I'll select the whole block and copy the ID.
I'll paste it into the animation selector and press enter.
Now, it's registered.
If it didn't add another one, that's also fine.

Next, we have the "From" and "To" options.
We want to animate from something to something.
By default, the "From" values will be the default values of the element on the page.
If I choose opacity from 0, and leave the "To" option as default, it will use the default values, which is opacity 1.
If I play it, you can see the text fading in.
I'll save the timeline and view it on the front end.
As you can see, it fades in on page load.

If you want to make the animation longer, you can drag the node to a longer duration.
If I want to exaggerate it, I can make it six seconds.
As you can see, it takes six seconds to fully load in.

By default, the "Ease" is set to default.
If we select "None," we will get a more linear animation.

Now, let me show you how to animate using translation.
If I want to animate this from the left side on page load, I can set the translation on the x-axis to -100%.
If I play it, you can see it coming in from the left slowly.
I'll change the duration to one second.
Now, it's coming in from the left.

I can also animate on the y-axis, so I'll bring it up from the bottom diagonally.
Now, it's coming up from the bottom left.
You can animate on multiple axes at the same time.
This is just a basic example.

Next, we have the scale property.
If I want to animate this from a smaller size, I'll set the scale value to something less than 1, like 0.95.
I'll remove the other properties and play it.
As you can see, it's fading up slowly.
If I change the "To" value to 2, it will make it bigger.
If I want to make it smaller, I'll set the "To" value to something like 1.5.
You can also animate using rotation.
If I set the "From" value to 10 degrees, it will animate from 10 degrees to the default value, which is 0.

Next, we have 3D transform, where you can animate on the x, y, and z axes.
You can also animate SVG and use the "Skew" property.
These are just examples demonstrating different properties in Motion Page.

We can also animate dimensions, which is the width and height of an element.
You may not be able to see this very well, so I'll add a background to demonstrate.
If I set the "From" value of the width to 100 and the "To" value to 50, you can see it animating to a smaller width.

Next, we have background position.
I'll remove the background and apply it to this section.
By default, Motion Page only shows animations above the fold, which means only the elements that are currently visible on the screen.
To show the animations below the fold, we need to set a repeating background and use the "Repeat Y" property.
If I set the background position to -100 pixels, it will shift the background down.

However, there is an issue if we use background position on page load, as we can't see anything below the fold.
We can use a repeating background to fix this issue.

Next, we have text color.
I'll remove the background color and set the text color.
I'll change it from the original color, which is white, to a violet color.
Please note that if you're using a more specific CSS selector, you may need to adjust it accordingly.

Next, we have border color.
I'll apply this to a button.
I'll change the border color from the default color to a pink color.
You can see the border color changing when the animation plays.

We can also use filters, such as blurring an element on hover.
We can also animate the opacity of an element on hover.
We can animate elements on hover using the "Mouse hover" trigger.
You can also use the "Mouse leave" trigger to reverse the animation after a certain time.

Another trigger event is the "Page exit" trigger, which plays the animations when the page leaves.
These are just a few examples of trigger events in Motion Page.

Now, let's move on to scroll trigger events.
When using scroll triggers, we have two lines, a green line indicating the start of the animation and a red line indicating the end of the animation.
We can use the "Lock to scroll bar" feature to keep an element locked to the scroll bar as we scroll.
We can also set a delay and choose whether the animation should repeat on every scroll down or only play once on scroll down.
There is also an option to reverse the animation on scroll back.
This is useful for creating parallax effects.

Next, we have the hover trigger event, which allows us to animate elements on hover.
This is useful for creating interactive elements.

Finally, we have the page exit trigger, which plays the animations when the page is left.

I hope this overview of Motion Page's features and properties was helpful.
Please feel free to contact us on our support page if you need any further assistance.
Good luck with your animations!