Documentation & help center

Getting started

Note:
Before anything else, it is imperative that your WordPress theme is developed correctly. It must include the following tag:
<?php wp_body_open(); ?>

Download

Free version :

  1. You can download the free version from the official WordPress plugin directory.

Premium version :

  1. After your purchase, you should have received a validation email with your login credentials.
  2. Go to the My Account page and log in to your user account.
  3. In the downloads tab, you can download the latest version of the AnimatePress plugin.

Installation

With WordPress dashboard

  1. From the Administration Screen, click on the Plugins section
  2. click the Add New sub menu
  3. Click on “Upload plugin,” and select the zip file you previously downloaded.
  4. Then click the Install Now button
  5. After installation and activation, you will find a new menu item called AnimatePress

With SFTP client :

  1. Connect to your server
  2. Upload the zip file folder to the /wp-content/plugins/ directory
  3. Activate the plugin in the Plugins Menu
  4. After installation and activation, you will find a new menu item called AnimatePress

Licence activation

When you activate the premium version, you should enter your licence key to use the plugin. You can find it in the validation email as well as in your user account, under the Licenses section.

Enable AnimatePress

AnimatePress features a general activation toggle. You can enable or disable it by clicking on the button labeled “Enable AnimatePress“.

Transitions settings

Enable transition

You can enable or disable the transition feature by checking this option. However, please note that for a loader to work, a transition must be activated without fail.

Select a color

In the free version, you have access to a limited color palette. By clicking on the desired color, you can change the transition color.

Select a color

In the premium version, you have access to a custom color palette. You can choose the color directly using the color picker or enter the desired color code directly, in RGB, HSL, or hexadecimal format.

Durations

You have two settings regarding the various timings of the transition. The “Waiting duration” value concerns the pause time between the end of the exit transition and the beginning of the entry transition.

The “in/out duration” value corresponds to the duration of both the exit and entry transitions.

All these values are measured in milliseconds (ms). For example: 2000ms for 2 seconds.

Select a transition

You can choose the desired transition by clicking on it. The free version has a limited selection. Upgrade to the premium version if you wish to access all transitions.

Loaders settings

Enable loader

You can enable or disable the loader function by checking this option. However, please note that for the loader to work, a transition must be activated without fail.

select a logo as a loader

You can add your logo as the loader. Click on “Add Logo” to upload it or use a logo from your media library.

Please note that when a logo is loaded, it automatically disables any other selected loaders. Removing it will automatically reactivate the saved loader.

Select a color

If you have selected a loader other than your logo, you can choose its color.

In the free version, you have access to a limited color palette. By clicking on the desired color, you can change the transition color.

In the premium version, you have access to a custom color palette. You can choose the color directly using the color picker or enter the desired color code directly, in RGB, HSL, or hexadecimal format.

select a loader

You can choose the desired loader by clicking on it. The free version has a limited selection. Upgrade to the premium version if you wish to access all transitions.

Confettis settings

How to use confettis

Use with a shortcode

You can use confetti on a page of your choice by using a shortcode. Depending on the theme you are using, the procedure may vary. Refer to your theme’s documentation to learn how to add a shortcode.

In any case, you can try adding this shortcode directly into the text editor: [ animatepress-confettis ] (attention, make sure to remove the spaces in the shortcode).

Use with gutenberg block

If you have access to Gutenberg blocks, simply add the block named “AnimatePress Confetti Block”.

Enable confettis

You can enable or disable the loader function by checking this option.

select a preset

Choose the type of confetti effect you wish to use. You have the option to preview by clicking the “Preview” button.

Select colors

Only for the School Pride, Snow, and Stars effects, you have the option to choose the colors that make up the effect. (Please note that colors are not reflected in the preview)

enable on success form submission

If you’re using a form plugin, you have the option to link this confetti effect upon form submission. Simply select the plugin you are using.

Cursors settings

Enable custom cursor

You can enable or disable the cursor function by checking this option.

hide default cursor

By checking this option, you can hide the default browser cursor. However, please note that this option may degrade the user experience and pose accessibility issues. It may also cause problems if you are using iframes on your website.

Select a color

If you have selected a cursor, you can choose its color.

set a cursor size

Select the cursor size, ranging from 5px to 50px.

Select a cursor

You can choose the desired cursor by clicking on it.

Note: The inverted cursor requires having a background color defined in the tag.