Beautiful interactions and animations are quickly becoming a standard for web design in 2022. Unfortunately it's still relatively complex to implement these in projects (aside from basic effects) - you'll need to use large animation libraries such as GSAP, Anime.js or others.
Motion.Page is a new WordPress plug-in that gives you a complete graphical user interface to apply complex animations and interactions two elements of a WordPress website. It's as if Adobe Premiere Pro's UI clashed with the power of GSAP web animations. In this article, we will be reviewing the new plugin and figuring out what exactly you can do with it.
When implemented properly web animation can seriously improve user experience and help them understand where important elements on the page are located.
Scroll based animations, or interactions, can add a level of class to a webpage commonly seen in high budget e-commerce websites. They serve no practical purpose, but add another layer of design to a webpage that many users love. If you're interested in seeing some great implementations of animation, checkout the Awwwards website or GSAP Showcase.
Note: it's easy to go overboard with animations, especially when you have a tool that allows you to easily implement them such as Motion.Page. It's important to note before continuing with this plugin review to just not. Don't go overboard.
When it comes to interactions and animations, Webflow is one of the best platforms out there. It offers a super easy to use graphical user interface that brings GSAP animations, Scroll Trigger, Parallax, and more all under one hood.
Motion.Page allows you too add Webflow-like animations and interactions to a WordPress website. Even with being a new plugin, it is on the level of the Webflow UI, and will only get better. Let's take a closer look at what you can do with the tool, and how it works.
Typically, this is implemented by specify an element that you want to animate, and writing JS like so:
That code is sourced from here, and is the example of an advanced scroll based animation. That's all well and good, but for many average users this is too complex to get a simple animation based on the scroll position of a webpage. Instead, you may be looking for an easy point and click message to achieve the same end goal.
That's exactly what Motion.Page does - takes these libraries and wraps them in a helpful graphical user interface. As the creator, you utilize a timeline and collection of settings to generate animations visually. You can preview them in real time, and publish them on your website. When the animation is published, the plugin generates code similar to what is seen above. It's not reinventing the wheel, instead it is making something that was once inaccessible to regular WordPress website creators easy and fun to use.
(This is also exactly what Webflow is doing)
This video offers a live recorded walk-through of the builders interface, along side an example of a relatively complex animation made easy with this plugin.
If you like these videos, please feel free to subscribe by clicking this link.
Now that we know how this to works, let's take a look at the user interface and how you can actually generate animations/interactions for your WordPress website. In this section, we'll walk through all of the steps needed to get a great animation applied to your site:
The 9112... number is the name of the animation. You can keep this as is or change it to something more user-friendly.
Choose the trigger. You can choose between page events, scroll trigger, and page interactions. For example, some page events include Page Load, and Page Exit.
If you select scrolltrigger, you can choose how the animation will display as the user scrolls through the viewport.
And interactions can either be a click or a hover.
Once you have determine the trigger for your animation, select the items that you would like to animate. This is done by manually entering the selector class or ID, or utilizing the selection feature, like so:
Simply hover over the element that you want to animate, and it will automatically grab the ID.
Now that we know what will cause the animation and where this animation will be applied, it's time to set up the actual effect. There's a lot to choose from, you essentially have all the features of GSAP laid out visually for you.
Choose from the following:
You can also said the ease of the animation.
While you can choose to only implement one animation affect, you can also combine these all together. As an example, you could have the text change color, grow, and rotate all in one animation. This could be triggered by the page loading, the users scrolling down the screen, or clicking on a specific element.
As you build the animation, you can use the timeline element to preview it on the live page, while also manipulate its duration. Once you have multiple animations, you can choose when and where they display, and how they interact with each other by using this timeline.
You can also choose to only apply animations to specific viewport widths. This is great when making responsive websites because sometimes an animation simply doesn't work on a mobile device.
When you've completed the animation, and previewed it live you can click the save animation button in the lower left of the UI, and the animation will be pushed live for all to view.
You can save this animation globally, making it easy to implement an additional pages or elements. Furthermore, do you have the ability to import and export animations making it easy to use across all different types of projects.
This is an incredibly high-quality and well thought out tool used to apply animations and interactions to WordPress websites. As you can see from the screenshots above, it's well designed and easy to follow. When you begin using it, everything is sized properly, interactive to mouse hovers, and generally a pleasure to use.
The team behind this tool really took their time when it came to planning out a user interface and experience that would allow everybody from beginners to professional developers to visually harness the power of GSAP.
Throughout a few Facebook groups we've seen several concerns regarding the front and performance of a website after adding this plug-in. You shouldn't be worried about performance whatsoever - the plugin and it's user interface is only accessible by backend users.
After creating your animations, the plugin implements them by generating pure GSAP/ScrollTrigger JS, adding the library, and initializing it. You can choose to have the library self hosted or delivered via CDN.
Of course, there will be a slight performance hit because you're adding additional weight from the GSAP library, but this would be the same if you were "hard coding" these animations.
Also, because we are on the topic of core web vitals, cumulative layout shift is not impacted by these type of animations. These are user initialized effects, meaning that Google will completely ignore them when measuring CLS.
With this tool, it doesn't matter what WordPress theme, page builder, or plugins you are using. The Plugin sits on top of whatever stack you're using, loading into its own interface. It essentially takes whatever is outputted on the frontend of your website (which could be built with Oxygen or Elementor, or rendered via theme), selects those HTML elements, and applies the animations there.
This is huge because you don't have to worry about compatibility issues or integration with popular page builders. Instead, it's its own complete solution that can use whatever WordPress is spitting out on the front end.
With that being said, let's take a look at what we can do with Motion.Page and an Oxygen Builder website. The animator UI is loaded on a front end version of a webpage built with Oxygen. Selection of elements, and the application of a scroll based interactive animation works perfectly.
(Soon to add more information when releasing our video review. Subscribe to be notified when it's released).
And of course, we also have to try it out with an Elementor website, as that is the most popular page builder. We load the Motion.Page Interface on a front end page built with Elementor. Element selection, and the application of animations works perfectly!
(Soon to add more information when releasing our video review. Subscribe to be notified when it's released).
Keep in mind, this isn't surprising as this is a globally compatible plug-in, which will work with anything you were using to create a WordPress website - essentially, that's what makes it so valuable.
As we will discuss in the next section, there is a lifetime deal for this product. Because of this nature, we always feel it is important to take a look at the developer team behind the plugin when somebody may be investing a couple hundred dollars in lifetime access to a product.
The team behind this tool is the same team behind the beloved OxyNinja Offerings. OxyNinja is a High quality framework and design set package for Oxygen Builder. It's one of the most popular third-party plugins for the builder, and has actively been developed for years. There's a popular Facebook group, and great one on one support. As an agency, we have used this tool in many of our projects (our review on OxyNinja here).
We have confidence that these guys will be able to deliver on their promises, and continually develop this platform into something that's even more powerful than Webflow interactions. They are a very talented and hard-working group of people.
On a sidenote, the implementation of additional GSAP plugins along side other libraries as a whole will just make this even more of a powerhouse tool. Might be smart to get in on this launch offer!
Because this plugin has recently been released, there is a launch offer. We will update this pricing section as the pricing of this plugin changes.
There are two pricing options, one is a yearly subscription and one is an unlimited lifetime license. The yearly subscription comes in at €119/year. The unlimited lifetime license comes in at €267 for a one time fee, which is discounted for the launch. Both offer all the features, a 30 day moneyback guarantee, and can be used on unlimited websites.
In my opinion, this is well worth the purchase price. It's an incredibly well designed, easy to use platform that allows you to add interactions to any WordPress website you want. It's not tied to one page builder or team, it's globally compatible.
From experience, if we hardcoded the same things that we could do with this tool using GSAP, we would spend more than 4x the time doing it. Simply due to the time savings, this plugin will pay for itself in a matter of hours (on 1 project!).
When compared to coding outright, Motion.Page saves us a ton of time and makes it easy to understand how and when animations are being applied to a specific webpage. We're going to begin using this plugin in all of our web design projects that require complex interactions and animations.
for us, we specifically like building in on scroll animations. Typically, these are subtle changes in the rotation, scale, and placement of images or other large elements on a webpage. It gives a sort of inertia affect to the scrolling of the webpage, and makes it just a bit more "premium".
Previously, we used to scroll trigger for this, but due to the number of elements that we were animating, it would get difficult to understand which code applied to which element. Now, with a visual interface, it will be incredibly easy to understand how animations are applied to a webpage, and make rapid changes, while visually testing them in real time.
If you have any questions about this plugin, feel free to reach out in the comment section below.