Want to add eye-catching scroll and time-based animations to your WordPress site?
If you’re a CSS expert, you can set these animations up yourself. But for the rest of us, WordPress doesn’t offer any easy way to add animations to content.
Animator is a new standalone plugin from the CSS Hero team that changes that, giving you access to a simple point-and-click interface to set up all different types of animations on your WordPress site, whether you’re using the native editor or a page builder plugin.
If you’re not a technical person, this gives you the ability to still set up animations on your site. And even if you are capable of writing your own CSS, Animator can still speed up your workflows with its interface.
In our hands-on Animator review, we’ll take a deeper look at what this plugin offers and show you how to use it to set up WordPress animations.
Animator Review: What Does the Plugin Offer?
The high-level benefit of Animator is that it lets you add tons of different animations to your site without needing any CSS, JS or other in-depth technical knowledge.
Instead, you can do everything from a point-and-click interface, complete with an animation timeline to help you control your animations.
Animator comes from the same team as the popular CSS Hero plugin, if you’re familiar with that. In a nutshell, Animator is to animations what CSS Hero is to general CSS styling.
Let’s go through some of the biggest features in a little more detail.
To help you manage your animations, Animator offers a simple point-and-click interface.
There are two main parts:
- A full-width visual preview of your site – as you add animations, you can instantly see what they look like on the live preview. This is really handy so that you can make small adjustments without needing to constantly reload a separate preview.
- An animation timeline – you can use the timeline to set up one or more animations based on the user’s scroll behavior or time. You can drag things around and adjust settings to get the perfect effect.
You’ll get a much more detailed look at this interface in the hands-on section…but overall, it’s very easy to use.
3+ Animation High-Level Modes With Tons of Animation Properties
To help you set up your animations, Animator offers three high-level modes:
- Parallax – “tween” animations based on the element’s percent position in the viewport. Tween is short for inbetween – the basic idea here is that it lets you create parallax scroll effects.
- Scroll – trigger specific CSS styles or animations after the user has scrolled a specific number of pixels. For example, you could apply state-specific styles to your header when the user scrolls down the page.
- Timed – create time-based animations that occur on a set schedule. For example, adding a float animation to an element to make it pop.
Here are some generic examples from Animator that show the different animation modes:
Beyond the high-level animation modes, you also have the ability to animate a huge array of CSS properties, including the following:
- Background color
- Background position
- Box shadow
- Font size
- Letter spacing
- Rotate X, Y, or Z
- Skew X or Y
- …lots more
To simplify things, Animator includes presets for a lot of these:
However, you also have the option to create your own animation, which lets you go beyond those presets if needed.
Works With Native Editor, Themes, and Page Builders
In addition to working with the native WordPress editor, Animator also works with third-party themes and page builder plugins.
This includes, but is not limited to, the following tools:
- Beaver Builder
- WPBakery Page Builder
Basically, Animator should work on any element on your site, regardless of where that element comes from.
For example, maybe you like Beaver Builder for design, but you feel that Beaver Builder’s animation options are too limited for your needs.
By installing Animator alongside Beaver Builder, you would gain the ability to add more advanced animations to your Beaver Builder designs.
Manually Edit or Export Animations (For More Advanced Users)
While Animator is built so that non-technical users can create animations using the point-and-click interface, more advanced users might appreciate that Animator still gives you access to the underlying code if you want to make edits directly.
You can also export the app data if needed.
Completely Standalone Plugin
While Animator does come from the CSS Hero team, you do not need to have CSS Hero installed to use Animator.
That is, Animator is a completely standalone plugin.
With that being said, Animator will still play nice with CSS Hero, so you’re totally free to use both if you want code-free control over your site’s styling.
How to Create WordPress Animations Using the Animator Plugin
Now that you understand what Animator offers, let’s dig into what it’s like to actually use Animator on your site.
Below, I’ll show you step-by-step how to set up WordPress animations using Animator and a demo site that I created with the Astra theme and the native WordPress editor.
1. Open the Animator Interface on the Page That You Want to Animate
To get started, you’ll want to open the Animator interface on the page that contains content that you want to animate.
If you want to animate a sitewide element (like your header), you can just open any page that includes your header. Any animations that you set up will automatically apply to all instances of that header.
To launch the Animator interface, you just need to click the Hero Animator option on the WordPress toolbar while viewing the relevant page.
2. Select the Element That You Want to Animate
Once you’ve opened the Animator interface, you should see a visual preview of your page, along with the Animator interface at the bottom.
To get started, you’ll want to select the element to animate by clicking on it in the live preview.
As you hover over the live preview, Animator will show some additional information about each element, which helps you choose the right one.
For example, to animate the image in my test design, I just need to select it:
You can also manually enter a CSS class or ID, which might be necessary for some background images.
For example, I struggled to use the point-and-click approach to select the hero image on my test site. It seems to be something with how the Astra demo site set the image as the container background in its special Container block, because I didn’t experience issues using point and click to select any other image.
3. Choose Your Animation Mode
Once you’ve selected the element to animate, you want to select the animation mode by using the Relative to box.
Again, you have three options:
- Viewport Height (AKA parallax)
- Scrolled Pixels
You’re basically making a declarative statement – e.g. “I want to animate [this element] relative to [this animation mode]”.
For this example, I’ve set it up so that I’m animating my site’s image relative to a looped timer.
Note – you can add multiple types of animations to a single element. For example, you could add both a time-based animation and a parallax animation (viewport height).
4. Set Up Your Animation Using the Timeline
Now that you’ve chosen what you’re animating, you’re ready to actually set up your animation using the timeline.
To do that, click the plus icon to Add Animation:
This will open a popup that contains the different types of animations you can use with that animation mode.
For example, for a time-based animation, some of the preset options include the following:
- Letterspace blur
- Shadow pulse
- Shrink jump
- Simple spin
You can see animated previews of what that animation might look like, which is really nice for choosing the right animation.
If you want to do a different type of animation that’s not on the preset list, you can also create your own animation type.
When you choose an animation, it will show up on the timeline. The animation will also apply to the live preview, so you can see exactly what it will look like on your site.
For a time-based animation, you’ll see a line appear on move through the timeline bar as the animation completes, which is really handy.
If you want to make the animation longer or shorter, you can just drag the bar on the timeline.
You can also click the three-dots icon to access more advanced settings, such as whether or not to loop the animation (and if so, for how long).
If you want to add multiple animations, you can repeat the steps to add a different animation.
You could then arrange those animations on the timeline to achieve your desired effect.
Make sure to turn off infinite looping if you want to use multiple time-based animations.
You aren’t limited to creating the same type of animation either. For example, you could technically add both time and scroll-based animations to the same element.
For parallax scrolled elements, Animator also lets you control LERP (Linear interpolation) to smooth the element’s scroll behaviors.
To adjust this, you can use the Lerp drop-down on the left side of the interface.
5. Publish Your Animations
When you’re happy with your animations, all you need to do is click the Save button to make them live on your site.
There’s also a handy option that lets you choose whether or not to publish your animations to the mobile version of your site.
Exploring Some Other Animation Modes
Different animation modes will have slightly different interfaces on the timeline.
For example, if you choose a Viewport Height animation, the timeline will change from seconds to relative percentage viewport height.
For example, you can see that it starts at 150% and goes all the way to -50%.
If you’re animating something like the background color, you can choose different colors based on the relative scroll depth:
For a Scrolled Pixels animation, you’ll see specific pixel numbers rather than relative percentages.
For example, if you set your animation step at 600 pixels, the animation will happen when the user has scrolled exactly 600 pixels.
How to Directly Edit, Export, or Manipulate Your Code
For more advanced users, Animator also lets you view the raw JSON data of your animations. You can use this to re-edit your animations, or copy/paste it to a text file to have a full snapshot of the current animations.
You can access these options by clicking the three dots icon next to the Save button and choosing Export Data.
Animator only comes in a premium version, but it’s affordably priced for what it offers.
At the normal price, it will cost you $49 for use on unlimited sites and one year of support and updates.
However, to celebrate its launch, the plugin is currently priced at just $29 at the time that we’re writing our Animator plugin review.
If you purchase it at this $29 price, you can lock in that price for renewals if you want to continue receiving support and updates after the first year.
If you want to test the plugin before making your purchase, Animator lets you spin up a fully functioning demo of the animation interface. You can access it on this page or by clicking the Try demo button on the Animator homepage.
There’s also a 30-day money-back guarantee, so you can test it out on your own sites at no risk to your wallet.
Final Thoughts on Animator
Overall, Animator delivers on its promise of offering easy point-and-click animations.
I’m certainly not a developer, but I was able to get up and running very quickly.
The timeline-based interface makes it easy to organize your animations and manage their settings. It’s also super helpful to be able to instantly see what those animations look like on the visual preview, without needing to refresh the page.
While Animator is simple enough for non-technical users, I think advanced users might still benefit just because it can speed things up. So even if you’re capable of writing your own CSS, you still might prefer using Animator to save time.
If you want to try Animator yourself, you can use the buttons below to get started: