AnimateGL needs WordPress 6.6 or later and PHP 7.4 or later.
Install the free plugin
- In your WordPress admin, go to Plugins > Add New Plugin.
- Search for “AnimateGL”, then install and activate it.
- Open the AnimateGL page in the admin menu.
Add your first animation
You can animate an element in three ways:
- Block editor: select a block and open the AnimateGL panel in the block settings sidebar. See Block editor.
- Elementor: select an element and open the AnimateGL section in its Advanced tab. See Elementor.
- Any theme or page builder: add the animation’s CSS classes to the element, for example
agl agl-fadeCSSUp. See CSS classes.
The animation plays on your live site when a visitor scrolls the element into view. In the block editor, blocks stay visible while you edit. Click Preview animation to see it there.
The AnimateGL page
The AnimateGL page in your admin has these tabs:
- Home: a quick start and a status card.
- Animations: every animation with a preview. Move the mouse over one to play it. Each has buttons to copy its classes, replay it, and open it in the editor with Customize. The class builder writes classes for page builders.
- Editor: the Animation Editor, where you design the site default animation.
- Help: links to the documentation and support, and system info to paste into a support request.
- Get Pro: what AnimateGL Pro adds. This tab is only in the free plugin.
AnimateGL Pro adds a Settings tab and a Site-wide rules tab.
Install AnimateGL Pro
- Download the AnimateGL Pro zip file after you buy it.
- Go to Plugins > Add New Plugin > Upload Plugin, choose the zip file, then install and activate it.
- Enter your license key when the AnimateGL page asks for it. See Licensing.
AnimateGL Pro includes everything in the free plugin. When Pro is active, it deactivates the free AnimateGL plugin. Pro also includes the Entrance Pack and Fade Pack presets, so you can deactivate and delete those add-ons.