Documentation

Content of the article

Installation

Download to your plugin directory or simply install via WordPress admin interface.
Activate.
Use.

Element

Element - a item of content that can be located in any part of the screen, and it may have animations.

Element consists of:

Title
Image or Content
Tooltip
Position of the Element
Element properties
Animation options
Condition display
CSS
Additional animation properties
Custom animation(not for all version)
Mobil
Selector
Hide or Clip
Second animation

Settings

Animator Cache - It reduces the number of plugin requests to the database. This increases the download speed of the page

Clear Cache - The plugin automatically clears the cache if a new element has been added. Use this button if for some reason your changes are not visible on the front-end

Show button to quickly add element - setting button display. This button allows the user to easily animate any part of the page (add a selector). This button can be viewed by users who have this role - https://codex.wordpress.org/Roles_and_Capabilities#manage_options

"on customize page"

"on front-end"

Collections

Elements can be grouped, for convenience, the output element via shortcode [wp_animator] (not for all version)

79739-clip-10kb

Shortcode

[wp_animator] (not for all version) Use attribute colection and elements:

colection - slug of the colections
elements - IDs of the elements

Example: [wp_animator colection='test,test1' elements=30,43,56]

Quickly add element Button

This is a feature for quickly animating any part of the page. It also allows you to visually control elements

TAB: "Animate element"

How to select a part of the page for animation - Shift+left/right mouse button OR use +left/right mouse button + this option -

Hint: If this element is a link use Shift+right mouse button

Before add this animation, you can try it -

Stop this animation -

Fill in the other fields as you need. Detailed description of these fields read below (Title, Animation options, Additional animation properties)

TAB: "All elements"

This tab allows you to find the desired item - delete or edit it.

Show element - marks this element on the page (only for info ) -

Delete element -

Edit element - redirect to the element editing page -

Watch video-tutorial please

Create new Element

To create the element just click - Add New element

Title - need for ease of identification elements in the list e946b-clip-28kb

Image or Content - you can choose that will display element :

Image - images of all formats that are supported by wordpress.

Content - any text or text with html tags and shortcodes . To add content instead of the image just click the checkbox Use content

ef23f-clip-29kb

Tooltip - You can add tooltips in different styles to the element.

Use tooltip - Adding a tooltip to the element.

Cotnent of the tooltip - In this field, you can insert text, HTML tags and shortcodes.

Tooltip style - You can choose one of the eleven display tooltips styles. Tooltips use only HTML and CSS. It has a fixed width and position (relative to the element)

Position of the Element - adjusts the location of the element on the screen.

Position X - by vertical. Top , Bottom - starting points. Units in pixels or percentages (relative to the screen size)

Position Y - by horizontal. left , Right - starting points. Units in pixels or percentages (relative to the screen size)

1a160-clip-331kb

Element properties - Width, Z-index, Position fixed.

Width - width of the element in pixels or percentage.

Z-index - display priority on the screen.

Position fixed - when scrolling element will always stay in one place on the screen.

393fe-clip-336kb

Animation options - Animation, Time, Iteration.

Animation - this list of available animations.

Time - property specifies the number of seconds a transition animation should take to complete. In other words, is the duration of one cycle of animation.

Iteration - the number of iterations animation. 0 is without animation and -1 is infinity.

Condition display - conditions display elements. By default, the element is displayed on all pages.

Show in exact pages - for each item, you can write a display conditions. Example: !is_page(25) AND !is_home() If you leave the field empty then the element will not be displayed anywhere, this is very important if you want to display this element only with a shortcode.

CSS - this additional css styles. Example:

border: 2px solid #222222;

border-radius: 50%;

Additional animation properties - Animation direction, Animation hover, Animation delay(not for all version), Fill mode.

Animation direction - CSS property indicates whether the animation should play in reverse on alternate cycles. Normal, Reverse, Alternate, Alternate-reverse

Animation hover - defines what to do animation when you hover the mouse over it. Without hover - nothing happens. Stop hover - animation stops pause. Star hover - animation begins to be run.

Animation timing function - specifies the speed curve of an animation. The speed curve defines the TIME an animation uses to change from one set of CSS styles to another. The speed curve is used to make the changes smoothly: linear, Ease, Ease-in, Ease-out, Ease-in-out .

Animation delay (not for all version)- property specifies a delay for the start of an animation (value in seconds (s)).

Fill mode - property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay).By default, CSS animations do not affect the element until the first keyframe is "played", and then stops once the last keyframe has completed. The animation-fill-mode property can override this behavior. None - Default value. The animation will not apply any styles to the target element before or after it is executing. Forwards - After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended. Backwards - The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animation-direction is "reverse" or "alternate-reverse"). Both - The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions.

Custom animation(not for all version) - You can create and use custom animation.

Use custom animation - it must be checked to apply a custom animation.

Name custom animation - write the name of the animations, it should be the same as the name of the CSS file without .css

Mobil - Changing the position of an element on the mobile device.

Change on mobile device - Use new options on the mobile device

Hide on mobile device - Hide element on the mobile device.

Width; Position X; Position Y; Z-index - New options for changing the positioning element

Selector - The ability to animate any element of the page. Video tutorial

Use selector option - Apply animation to selector

Name of the selector: - Here is the text of the selector. How to determine the correct selector - CSS selector

Hide or Clip - Controlling the visibility of elements. Start the animation if the element is in the visible part of the screen Video tutorial

Clip/cut the element outside of the container - Hiding part of the element that went beyond the container

Hide the element outside of the container - The element is hidden completely if its extreme point has left the container

Start animation on screen - Start the animation if the item is on the visible part of the screen. In other words - when the horizontal scrolling drops to the element

Selector of the container : - This is a container selector whose dimensions will listen to the element - CSS selector

Second animation - This is the second animation that will start only after the end of the first animation.

Use the second animation - Apply the second animation.