AnimateWP is the first WordPress Plugin which gives you the ability to add amazing Greensock animations easily without any programming skills.
Every single animation is based on Greensock – the ultra high-performance, professional-grade HTML5 animation framework for the modern web. Learn more about Greensock here.
Animate WP consists of Animations and Timelines.
An animation changes the properties of one or multiple elements over time. A timeline acts as a container and holds multiple animations. With timelines you can chain animations together and precisely manage their timing. This way you can build complex sequences of various animations.
Animate WP can be installed via the WordPress backend just like any other plugin.
Please be aware that Animate WP requires Advanced Custom Fields Pro.
You will be noticed, to install the version that ships with Animate WP if you haven’t installed ACF Pro yet.
After installing the plugin, you will notice that the Animate WP Menu will be available. From here on, you can add new Timelines. See the next chapter for a detailed documentation about all functionalities of Animate WP
Just specify a name for your timeline, e.g. „My contact section timeline“
This is where you will declare all the animations, your timeline consists of. See the next chapter for a detailed guide on animations.
When do you want your timeline to play?
|On page load||Starts the timeline immediately on page load|
|On page unload||Starts the timeline when the user wants to leave the page (via a link), waits for the timeline to finish and then loads the new page. This doesn’t work if the user closes the browser, as you can’t stop the user from leaving.|
|Hover||Starts the timeline when the user hovers over a specified element|
|Click||Starts the timeline when the user hovers clicks on a specified element|
|Scroll||Starts the timeline when the user scrolls to a specified element|
For a detailed guide on how to use Triggers see the Trigger section.
Enable the Repeating Option, if you want the timeline to repeat itself.
If enabled, you can specify how many times the timeline shall repeat itself and declare a delay between each repitition.
First of all, declare the element on your website which shall be animated. Animate WP uses standard class and id selectors. If you are already familiar with the selection of elements by class or id you can continue with the next step.
If you don’t know about selectors yet, you can learn how to identify and select the elements on your homepage in this guide.
If this option is turned on, you will animate the text inside your selected elemented, instead of the element itself. You can use this technique to animate each character, word or line in your text on it’s own.
There are 3 Variants of SplitText available. You can split your text into characters, words or lines automatically and animate each individually.
The option to select the variant becomes available, as soon as you activate SplitText.
The ’stagger‘ animation types are recommended to get the best result.
Your line breaks and overall text layout will not be broken and the text will stay responsive.
There are 3 different base types of animation.
|Animates the element from the current values to the defined destination values.||Creates an backwards animation. You define the beginning values. The current values of the element are used as the destination values. This is a good way to animate elements onto the page, because you can style your element the way you want to look it at the end of the animation and animate them in from elsewhere.||Allows you to specify both the starting values and the ending destination values.|
There are 3 additional animation types available, used to animate multiple elements at once with staggered starting times. This way you can create an evenly-spaced sequence.
|Functions the same way as the 3 animation types above, but you can specify an additional stagger time parameter. This time is used to offset the animation of each element by the specified amount.|
|Easing Type||Easing Variant|
AnimateWP allows you to animate and control almost any element property.
How long it takes the animation to animate the specified properties. Duration in seconds.
Controls the placement of the animation. A value of 2 seconds will wait for the previous animation to finish, wait 2 seconds and then start this animation. You can use a negative number to generate overlaps between animations.
Value in seconds
This option can be activated to repeat the animation multiple times, instead of playing it once.
If activated the number of repeats and the delay between each repetition can be specified.
By checking yoyo effect every repeat cycle will run in the opposite direction, this way the animation appears to go back and forth.
If you want infinite repetitions set number of repeats to -1
There are 4 fields for control selectors, which allows you to control your timelines.
Play, Pause, Repeat and ProgressSlider.
Specify the selectors in the corresponding fields. Clicking on the specified elements then allows you to play, pause or repeat your timeline.
If you want a range slider to control the progress of your timeline, you can create an input of type range and specify the class in the ProgressSlider field.
Please be aware that the slider has to have a minimum of 0 and a maximum of 100, to allow you to play through the whole timeline. For a smooth experience specify a step of 0.01.
Plays the timeline as soon as the page is done loading.
Specified animation delays will be considered.
The timeline plays when the user wants to leave the page, by clicking a link.
The timeline will not play when the user closes the browser window or tab.
Plays the timeline if the user hovers over a specified element.
If selected, you have to specify the selector (class or id) of the element that shall trigger the timeline when hovered.
Plays the timeline if the user clicks on a specified element.
If selected, you have to specify the selector (class or id) of the element that shall trigger the timeline when clicked on.
Plays the timeline when the user scrolls to a certain location on the page.
If selected, you have to specifiy the selector (class or id) of the element that shall trigger the timeline when it scrolls into view.
Scroll Trigger Position:
You can choose the viewport trigger position when scrolling.
Scroll Trigger Offset:
Additionally you can specify a offset for the scroll trigger position (in pixels)
If checked the animation progress is based on on the scrollbar position. The animation will no longer play automatically (with the given duration), instead the animation will progress as the user scrolls down and will play in the opposite direction as the user scrolls back up.
You can specifiy the speed of the animation while scrolling.