Animate WP Logo

Official Docs

Introduction

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.


Getting Started

Installation

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.

Animate WP Backend

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

Basic Timeline Overview

When creating a new timeline, your interface will basically look like this one.

Timeline Name

Just specify a name for your timeline, e.g. „My contact section timeline“

Custom Animations

This is where you will declare all the animations, your timeline consists of. See the next chapter for a detailed guide on animations.

Trigger Options

When do you want your timeline to play?

Trigger Option Explanation
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
Custom Event (Advanced) Starts the timeline when a self defined certain javascript event fires

For a detailed guide on how to use Triggers see the Trigger section.

Repeating Options

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.


Animations

To declare a new animation you have to specify various parameters.

Selectors – Class / ID

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.

SplitText Animation

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.

Split Text Variant

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.

Want to see SplitText in action?

SplitText Animation

Animation Type

There are 3 different base types of animation.

to from fromTo
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.

staggerTo staggerFrom staggerFromTo
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.
Want to see the different animation types in action?

Animation Type Visualizer

Easing

Choose from various eases to adjust the rate of change during the animation. This way you can give your animations a specific feel.

Easing Type Easing Variant
Power0 easeNone
Power1 easeIn
easeOut
easeInOut
Power2
Power3
Power4
Back
Elastic
Bounce
Circ
Expo
Sine
Want to see the different easing types in action?

Easing Type Visualizer

Animated Properties

AnimateWP allows you to animate and control almost any element property.

Animation Duration

How long it takes the animation to animate the specified properties. Duration in seconds.

Delay

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

Repeating

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

Controls

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.


Triggers

On page load

Plays the timeline as soon as the page is done loading.
Specified animation delays will be considered.

On page unload

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.

Hover

Plays the timeline if the user hovers over a specified element.

Trigger Selector:
If selected, you have to specify the selector (class or id) of the element that shall trigger the timeline when hovered.

Click

Plays the timeline if the user clicks on a specified element.

Trigger Selector:
If selected, you have to specify the selector (class or id) of the element that shall trigger the timeline when clicked on.

Scroll

Plays the timeline when the user scrolls to a certain location on the page.

Trigger Selector:
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.

  • Trigger element hits middle of viewport (default)
  • Trigger element hits bottom of viewport
  • Trigger element hits top of viewport

Scroll Trigger Offset:
Additionally you can specify a offset for the scroll trigger position (in pixels)

Animation progress based on Scrollbar

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.

Scroll Speed:
You can specifiy the speed of the animation while scrolling.