PHP 5.6 or greater is recommended before installation
When updating the plugin always back up your site prior. We test release updates thoroughly but we are humans and sometimes we miss things which can cause errors on your site. Please ensure that you have arecent backup of your site before updating.
The Animation Hub gives you customizability options that can help you integrate the plugin properly with your own site. The settings under this area have a global effect and will affect all of your animations throughout the site.
Enable the option to disable all animations on your site essentially disabling the plugin temporarily. Useful for debugging the site.
Enable this option to apply animations when the page loads. No scroll movement will be needed for the animations to take place if the item is currently in the viewport when the page loads.
Enable this option to implement animations more than once per page load. Once enabled, every time the element enters the viewport the element will animate, likewise when the element leaves the viewport, the element will have the reverse effect.
This option lets you choose the number of pixels from the bottom (and top) of the viewport before the animation will take place.
This has many different uses but can come in handy when you have a fixed header or footer.
Quick & Easy animations are the all-time go-to for WordPress site managers who don’t know a lot about code. That’s because there a pretty easy thing to get your head around and there is minimal web knowledge needed to implement them.
Simply select a class from the default animations tab and add it to any element on your site. You can do this via the wordpress editor, insert it within your theme files or use any of the tool your theme or page builder offers.
A full list of Quick & Easy animations can be seen within the Quick & Easy Animations Tab.
Adding a delay to your animation can be useful for many different reasons and that’s why we made it really easy to apply one to your Easy animations.
Add a secondary class of delay-*** (replacing *** with your chosen speed in milliseconds).
Note: You will still need to apply the Easy animation as normal adding the first class, you’ll then need to leave a blank space and apply the delay-*** class.
Amending the speed to your animation is also very important.
To do this you can add a secondary class of speed-*** (replacing *** with your chosen speed in milliseconds).
Note: You will still need to apply the Easy animation as normal adding the first class, you’ll then need to leave a blank space and apply the speed-*** class.
Custom Animations are a more complex setup than Quick & Easy Animations however Custom Animations give you 100% customizability and a global scope allowing you to target multiple elements with a few line of CSS.
There are 2 steps to follow to get advanced animations working.
Activating elements is a pretty straightforward process and can be done within the Custom Animations tab.
Activate an element by inserting its Class, ID, element tag to the input field within the tab and click “Activate Element” under the tab. Once it is activated, you’ll see it appear below the input field.
Writing the CSS is straightforward if you are familiar with CSS3.
After activating an element you’ll be able to control the element before and after it enters the viewport (based on your configured settings). This is because, when it is due to animate (based on your configured settings) a CSS class will be added to the element. The class added is “scroll-triggered”.
With this knowledge and your own knowledge of CSS, you can create an advanced CSS animation.
You can add any animation that you like, there aren’t any restrictions.
A simple version of your CSS could look like this.
CSS Transitioning is key to allow a smooth transition between states.