Visual Effects & Animation Kit for Elementor

Thank you for purchasing our plugin. We are happy that you are one of our customers and we assure you will not be disappointed. We do our best to produce top notch plugins with great functionality and clear code.

"Visual Effects & Animation Kit" is a WordPress plugin for Elementor Page Builder that provides you an ability to enhance the design of your website with non-standard effects and animation (mouse helpers, image hover effects, image mask, dynamic background, background text, background scrolling text and background slideshows).

Attention! Starting with v1.2.0, the "Visual Effects & Animation Kit" plugin supports Elementor containers (flexboxes and grid)!

RTL Support

"Visual Effects & Animation Kit" plugin supports RTL text direction for front-end and admin.

License

With our regular license you are licensed to use this plugin to create one single End Product (the final website customized with your content) for yourself or for one client.

What is allowed with the single regular license:

You can install the plugin on 1 website (on a single domain) for yourself or for your client. You can then transfer that website to your client for any fee. In that case, the license is also transferred to your client.
You can install your theme with the plugin on your test/development server for testing/development purposes (this installation should not be available to the public).
The plugin updates for the single End Product (website) are free.

What is not allowed:

With a single regular license you are not allowed to create multiple websites with multiple plugin's installaions. For multiple plugin's installaions you will need multiple regular licenses.
To resell the same website with installed plugin (Single End Product) to other clients. You will need to purchase an extended license for this.

For more information regarding license regulations and policies, see the links below:

Support Policy

In order to receive a technical support assistance, you need to have a valid purchase code. To get the code, please navigate to your ThemeForest "Downloads" page and click on the plugin download link. Check this guide for more details.

PLEASE NOTE! As authors of this plugin we do provide support only for the plugin-related features.

We do not provide support for additional customization or any other compatibility issues that might arise.

If you have any questions that are beyond the scope of this help file, feel free to contact us. We will respond as soon as possible (within 24 – 48 hours, usually faster). We are open from 10am to 7pm (CET), from Monday till Friday.

Video Tutorials

For more information regarding the functionality of the plugin, we suggest checking our Video Tutorials.

The most popular video tutorials:

System Requirements

"Visual Effects & Animation Kit" plugin does not require any supplementary configuration for working properly. It can work on minimally low server configuration as the Elementor page builder requires.

Plugin Installation

Unpacking the plugin

Before installing the plugin, please make sure you unpacked the archive and extracted the plugin's files. Some of the folders names may slightly vary. Treat the screenshot below as an example only.

The main package contains archive with the plugin and documentation.

The way to install the plugin (via WordPress admin panel):

Log into the WordPress admin panel.
Navigate to Plugins > Add New and click on Upload Plugin on top of the page.
Select the trx-effects.zip file and click Install Now button.
After the successful installation, click on Activate Plugin.

"Visual Effects & Animation Kit" plugin contains several modules that help to create different effects. Once the plugin is installed and active, navigate to the Appearance (WP Dashboard) > Visual Effects for Elementor > General section. Here you can find the list of available modules as well as the general settings for some of them. By default, all modules are enabled.

Plugin Update

This step is required if you received a notification that a new version of the plugin is available. You can see this information in Changelog section at the bottom of the item's details page.

Update using WordPress uploader

Log into your ThemeForest account and navigate to Downloads tab. Find the plugin of a new version and download it.
Log into your WordPress website and go to WP Dashboard > Plugins > Installed Plugins.
Deactivate and delete the plug-in of old version.
Go to Plugins > Add New and install the plugin like it was described in the Plugin Installation section of this documentation file.

"Visual Effects & Animation Kit" plugin contains several modules allowing you to create different effects. Once the plugin is installed and active, navigate to Appearance (WP Dashboard) > Visual Effects for Elementor > General. Here you can find the list of available modules as well as general settings for some of them. By default, all modules are enabled.

The list of available plugin modules:

Animations;
Background colors;
Background slides;
Background text;
Dynamic background;
Image effects;
Image mask;
Image scroll;
Mouse helper;
Smoke;

You can find the description of each module in the corresponding chapters of this documentation file below.

IMPORTANT! Please make sure that the module you want to use is active in Appearance (WP Dashboard) > Visual Effects for Elementor > General tab before proceeding with theme customization.

Animations Module

This module extends the functionality of Elementor elements by adding advanced options to create diverse animation effects. These effects can enhance interactivity and visual appeal, bringing elements to life with dynamic motion, transitions, and responsiveness to user actions.

Two variations exist:

Background layers for sections/containers and columns;
Scrolling and Mouse animation for all Elementor elements;

Background Layers

This groups of settings allows you to create a multi-layered animated background for sections/containers or columns ONLY!

You can add an unlimited number of images positioned above the row background — or use them to form the background itself. For each image, you can define its initial position, offset behavior (responsive to mouse movement, scrolling, or fixed position), size relative to the row, z-index ("depth"), and movement speed.

By layering multiple images with varying offset parameters, you can create a dynamic parallax effect, simulating the illusion of 3D space.

Navigate to Edit Section/Container/Column > Style > Background Layers to create your unique effects.

Scrolling and Mouse Animation

You can customize animation settings for any object independently, based on scrolling, mouse movement, or both under any Elementor element > Advanced > Animation.

Descriptions for some options are available directly in the Elementor widgets panel, so we'll take a closer look at a few key ones.

Text Animation - can be used for headings and titles only.
Enables you to animate a text block as a whole, or break it down for animation word by word or character by character — treating each as a separate object to which the transformation settings are applied.
Word or character animations can trigger immediately upon reaching the "Start point." In this mode, each word or character animates sequentially with a slight delay. If the "Separate animation" option is enabled, each word or character acts as an independent object, animating individually while factoring in the "Scroll lag" setting.
Mouse Animation - allows the object to smoothly follow the mouse cursor, creating dynamic movement in response to mouse interactions.
- Transform Type - specifies the type (algorithm) of transformation;
- Momentum - mouse movement response gain factor;
- Z-index - the perceived "proximity" of an object to the viewer — the closer the object, the more pronounced its movement in response to mouse actions.
- Mouse handler - the area within which the object responds and moves in reaction to mouse movements;

Background Colors Module

The Background Colors Module allows you to create web pages with the background color, which changes smoothly from one page area to another as you scroll down the page if this page is built using the Elementor page builder.

If this module is active, you can find the "Background Key Color" section under the page element > Advanced tab.

You set the markers for page elements (titles, images, etc., but NOT for sections, columns, or containers) and specify the background colors for these areas. Once the first page element with the marker appears in the center of the screen, the background color will be applied with the maximal color intensity (saturation). While you are scrolling down the page, the background color is gradually fading out, becoming more transparent, and merges with the background color of the next page element. You continue scrolling down the page and the second background color becomes more vivid with a pick when the page element with the second color marker reaches the center of the screen. Then the background color fades out.

"Target Selector" option - specify the CSS selector (ID or CSS class) of any page element from the current page to which the background color will be applied. Do not forget to place a pound sign (#) before the ID of a page element, like #selector1 and dot before the CSS class. If empty, the background will be changed for the entire page.

Background Slides Module

PLEASE NOTE! This module contains two effects: background slideshow and background mask that should be adjusted separately.

Background Slides

"Background Slides" allows you to create background slideshows for page rows by adding an unlimited number of background images to Elementor section/container (row) and display them in a form of a slideshow. The animation duration for the whole slideshow is customizable.

We have combined two effects: "Pan" (panoramming, slow zooming) and "KenBurn" (one image appeares through another).

Unlike the default Elementor "Background - Slideshow" widget, we are using easing effect, as well as provide a posibility for our customers to choose a slide effect, its direction and change the point of application of the effect for each image separately. Thus, you can create more dynamic and varied image interchanges.

In order to create a background slideshow, navigate to Edit Section/Container > Style > Background slideshow in the Elementor widgets panel and set the required parameters.

Slideshow general settings:

Overlay color - Add transparent color layer, that tints the created slideshow.
Animation duration - Regulate the duration of slides interchange.

The settings for each image (slide):

Slide size - Select the size of the slide: cover, contain or fill.
Slide effect - Specify the appearance effect.
- None - static slide (without any appearance effect);
- Fade - changing static slides with the "Fade" effect;
- Zoom in/out;
- Infinite in/out - alternate continuous zooming in/out (for single slides, without transition to the next slide);
Effect origin - Choose the point of application of the effect (the exact location at which the effect is applied to the image).

Background Mask

You can use an .svg image with transparent areas, allowing the background image of a section or slideshow to show through. The solid parts of the mask can be filled with any color, including semi-transparent shades. If the section height exceeds the viewport height, the slideshow adapts to the window size and remains fixed during scrolling, creating a static background effect. As you scroll, the mask gradually scales to cover the entire viewport.

The mask can be applied to both slideshows and standard section backgrounds set within Elementor’s default "Background" settings panel.

The settings are available under Edit Section/Container > Style > Background slideshow.

Mask Settings:

Mask image - an alternative mask as an .svg file containing a solid shape with cut-out areas that reveal the background image. To enable maximum scaling during scrolling, group all elements within the .svg and assign the class trx_addons_mask_in_svg to the group.
Mask color - the color of the solid part of the mask (can be with transparency);
Mask delay - a lag of the mask when it follows the mouse cursor. The higher the number, the greater the lag. At values of 0 and 1, the mask follows the mouse without delay.
Mask zoom - initial scale of the mask. Due to the mask implementation technique, this number cannot be less than 1, so when creating a custom mask, you need to draw it no larger than the required size (a little smaller is even better), and if necessary, increase it with this field.

Background Text Module

This module enhance the Elementor functionality by adding "Background Text" parameters to Elementor sections/containers (rows) helping you create background text lines and animate them, when they enter the visible area of the window. You can also make this text "scroll", like in a news ticker. In this case after the entrance animation the background text starts scrolling continuously.

Once the module is active, open your page through the Elementor page builder, find the page row (Elementor section/container) to which the "background text" functionality you would like to apply and proceed to Edit Section/Container > Style > Background text in the Elementor widgets panel. Here you can specify the text, text color, font family, font size, text shadow and other parameters for your background line.

Below you can find some clarifications of the basic options:

Text - Type in some text.

You can use the following macros to insert additional elements into your text:
- [divider] - adds a divider specified under "Divider";
- [icon name=icon-name] - inserts an icon with specified class name. The icon here is from the Fontello icons set that comes with the theme. You can expand the list of available icons by adding new ones from the fontello website.
- [image id=image-id] - adds an image with specified ID. You can find the ID for the image in your WordPress Media Library.
Additional attributes for [image] and [icon]:

size=NNpx|em|rem|%
thumb=thumb-name (only for image)
padding="top right bottom left"
margin="top right bottom left"
top | right | bottom | left=NNpx|em|rem|%
style="any CSS rules"
Background Type - Set a background color or gradient.
- Text as Clipping Mask - if enabled allows you to output the image or color gradient as text color;
  
  Gradient: Image:
Entrance effect - Choose appearance effect.
- Slide - symbols appear one by one from left to right;
- Rotate - symbols rotate one by one from top to bottom;
Top offset and Left offset - Shift the text. The shift point is the top left corner of a section.
Z-index - Raise the ticker above the content of the section, thus making it overlap content. Elements with a higher index will be placed on top of elements with a lower index.
Marquee speed - Set the scrolling speed. If the option is set to 0, it means without scrolling.
Pause on hover - Stop the scrolling line, when you hover over it (if "Z-index" of the background text (not the whole section/container) is larger than 0).
Marquee margin - Set distance between line duplicates. The line is repeated for looped motion.
Reversed movement - Make the text scroll in the opposite direction: for regular text - from right to left, for RTL text - from left to right.
Overlay image and Overlay position - Place an image (.png) over a background text line to add a "texture" effect to it.

Dynamic Background Module

With the help of the Dynamic Background module you can create unusual background effects for some page elements. It fills the page section with background color gradually in a form of a circle or with fade effect, while you are scrolling down the page.

Once the module is active, a "Dynamic Background" section will appear in the Elementor widgets' settings, under "Advanced" tab. These settings are available for page elements (icon, title, text, image, etc.) and NOT for sections, containers, and columns.

To add such effect to your page, please choose a page element (icon, title, text, image, etc.) and in the Elementor widget's settings identify this page element as a Starting point. Specify the rest parameters, like ID, background effect, background color, delay, etс. Now you need to find another page element and identify it as an End point.

The effect begins when your starting breakpoint becomes visible in the window and lasts till the end breakpoint reaches the visible area of the window. The starting and end breakpoints should have the same ID to make a "pair".

The "Shift" option indicates the shift in percentage (from -100% to 100% of the screen height) of the start/end point of the effect from the bottom of the window, which is the default point of moving.
The negative shift means that the start/end point of the effect will not reach the bottom of the window.
The positive shift means that the effect will start/end when the point reaches the bottom of the window and moves set distance downward (in percentage from the window height).

The sections with dynamic background effects can intersect.

PLEASE NOTE!Please also view this video tutorial on how to customize/create the dynamic background.

Image Effects Module

This module adds modern image hover effects, based on OpenGL and curtains.js library, and works for screen resolutions 1280px and above.

After module's activation, the "Image effects" section will appear in the Elementor widgets panel for the Elementor "Image" and "Image Box" widgets under Content tab. Here, you can select the image hover effect from the drop-down list and specify the needed parameters.

Some examples of hover effects:

Waves
Ripple
Swap
Tint
Smudge

Image Mask Module

This module allows you to use any transparent image (.png, .svg) as a mask for any Elementor objects (sections, columns, widgets) in order to create composite shapes of objects, both from edges and inside.

Please pay attention to the opacity color of the image that is used as a mask. The more transparent color is used in a deffinite part of the image, the more transparent masked object will be in that part. Thus, by making gradient transparency, you can build gradually disappearing objects (sections, columns, images, videos, etc.).

In order to add an image mask to any Elementor element (section, column, container, widget), navigate to the Elementor widgets panel and find the Advanced > Image Mask section. Additional options appear once the image itself has been uploaded.

Image Scroll Module

This module enhances the Elementor "Image" widget by adding customizable parameters that enable dynamic scrolling effects. Users can make images move in response to mouse hover or scroll wheel actions, creating an interactive and engaging visual experience.

Scroll direction - the direction of scrolling effect: Up/Down/Left/Right;
Scroll event - the event that starts scrolling: when the mouse hovers over the image or when the scroll wheel is used (available for "Up" and "Down" scroll directions);
Max. height - the image height;
Start position - the initial image offset (as a percentage) (available for mouse hover);
Duration - the duration of the scroll animation (in seconds) (available for mouse hover);

Mouse Helper Module

This module displays dynamic suggestions when the mouse hovers over various page objects.

PLEASE NOTE!Please also view our video tutorial.

The module description contains such chapters:

General Settings
Elementor Widgets' Settings
For Developer

General Settings

After the module activation, the "Mouse helper" section should appear in Appearance (WP Dashboard) > Visual Effects for Elementor in WordPress dashboard menu panel. Here, you can set the behavior of the mouse helper globally.

Below is a brief description of all the available settings:

System cursor - This options allows you to replace system cursor with a custom image or hide it.
- Default cursor image - Select or upload image to use it as default cursor.
- Cursor image over links - Select or upload image to use it as cursor over links and buttons.
Show mouse helper - Display the mouse helper globally and enable the mouse helper settings for Elementor page builder to output animated helper near the mouse cursor on desktop and notebooks.
Style - Select a style of the mouse helper.
Always visible - Display the mouse helper permanently or only when hovering over the corresponding object.
Centered - Place the center of the helper in the cursor position.
Smooth change states - Smooth transition between helper states (to a picture, with text, with an icon) or abrupt state switching.
Background color - Specify the background color of the mouse helper.
Border color - Choose border color.
Text color - Specify text color.
Delay - Specify the coefficient of lag between the helper and the cursor (1 - the helper moves with the cursor).

PLEASE NOTE! By default, the background color and text color on the mouse helper inherit the theme colors. You can also override these color settings by specifing the individual ones.

Elementor Widgets' Settings

In case you want the mouse helper to display some special information for a definite page section or just change the cursor style over a specific section/element, you should enable the mouse helper for the Elementor page builder in the global settings, like on the sreenshot below. Save the changes.

Now, proceed to the Elementor widgets panel, enable the mouse helper for a particular section/column/container/widget and specify additional settings (text, background image, icon, etc.) in the Advanced > Mouse Helper section.

Below you can find some clarifications of the basic options:

Cursor in the center - Place the center of the helper in the cursor position. By default, the helper is shifted to the right and down from the mouse cursor.
Magnet distance - Apply the effect of "sticking" or "anchoring" the page element (icon, button, etc.) to cursor, while the cursor is approaching a certain distance to this page element. Set the distance in px.
Overlay mode - Select one of multiply and screen blend modules. This option uses standard CSS blending mode properties.
Motion axis - Specify the direction of helper's motion: vertical, horizontal or both.
Motion delay - Specify the coefficient of lag between the helper and the cursor (1 - the helper moves with the cursor).
Rotate text - Arrange the text in a circle inside a helper and rotate it.
Custom layout - Paste html code of alternative layout to display a compound helper.

Moreover, the Mouse Helper Addon enhance some Elementor widgets (Heading, Title, etc.) with "Highlight on mouse hover" function, allowing you to make your titles unique. View on Hover

For Developer

Display settings of the mouse helper for Elementor modules are specified in the data parameters of a page block. If you would like to add a mouse helper to any html block, which can not be edited through the Elementor page builder, like, displaying a post on a blog stream page, you can set up the mouse helper for any block through the Elementor editor and rewrite/copy the settings of this mouse helper in the debugger. Copy all tag attributes that start with data-mouse-helper.

Here are some examples of tag attributes you may use to design your mouse helper:

data-mouse-helper-color="your-color" - the text color inside a mouse helper;
data-mouse-helper-bg-color="your-color" - the background color of a mouse helper;
data-mouse-helper-bd-color="your-color" - the border color of a mouse helper;
data-mouse-helper-icon-color="your-color" - the icon color (if empty, the text color will be used);
data-mouse-helper-icon="your-icon-class" - add an icon to the mouse helper;
data-mouse-helper-text-round="1" - arrange the text in a circle inside a pplied to helper and rotate it;
data-mouse-helper-centered="1" - Place the center of the helper in the cursor position. By default, the helper is shifted to the right and down from the mouse cursor.
data-mouse-helper-mode="normal|difference|..." - helper overlay mode;
data-mouse-helper="hover" - display a mouse hover (image, circle with text, ect.) on hover. When you click on a page object the standard behavior of the object is used.
data-mouse-helper="highlight" - can be applied to texts only.
data-mouse-helper-delay="number from 1 to 10-15" - movement delay of the helper;
data-mouse-helper-axis="x|y|xy" - the helper moves along the specified axis;
data-mouse-helper-text="your-text" - text helper;
data-mouse-helper-image="your-image-url" - image helper;

Smoke Module

This module can definitely improve the design of your website and draw the attention of your potential customers. It allows you to create extraordinary colored smoke effects, that will follow any mouse movements of your website's visitors. Below you can find an example of the Smoke effect.

Once you have activated the module, a new Elementor "Smoke" widget will appear under the "Basic" group.

Two types of effects are available: smoke and spots. They can be assigned to the whole page, section/container, or column ("Place" option). You can play around with the settings to achieve the best result.

Smoke - colored shimmering trace of the mouse cursor;
Spots - colored spots that glide across the canvas at varying speeds (or can be static), following random paths while shimmering, morphing, and adjusting their transparency; We have used 5 spots in the example above.

PLEASE NOTE!The background color, specified in this widget, overrides the same parameter of the area, to which the effect is applied (section/container, column, or the whole page).

We recommend using Poedit software for translation-related purposes.

To translate the plugin to your language, please follow these steps:

Download and install Poedit software.
Navigate to the trx-effects/languages/ folder and locate .pot file. Copy it to your desktop for editing.
Double click on the .pot file. In the Poedit window click on the "Create New Translation" button, choose the necessary language of the translation from the dropdown list and click "OK."
Now select the constant text string you need to translate from the "Source text - English" field and type in the necessary translation into the "Translation" field.
You can translate as much as you want, just go through the file and click on each string in "Poedit" and add your translation.
Next, you have to save the changes to your .po file using the naming convention based on the language code (e.g. pt for Portuguese) followed by the country code (for instance _BR for Brazil). To do that click on the "sheet" icon (you can also use hotkeys CMD + Shift + S in OS X or Win+S in Windows) and type in the name according to the screenshot below.
The first lower-case letters define the language, whereas the second upper-case letter defines the country. In most cases, the language and country are the same, like “de_DE” for Germany.
However, there is a difference for languages like English or Portuguese, which are spoken in several countries natively. In this case, the difference is in the first and second letter pairs; for the UK, the code would be en_GB, whereas the en_US stands for the USA. If you are not familiar with the codes for your native language and country, then visit the GNU website. See Language Codes and Country Codes for the lists of codes.

PLEASE NOTE! If you use the wrong naming convention WordPress can not process your translation.
When saving your .po file, Poedit automatically creates a new .mo file, with the same naming convention. According to the example above, the file would be called pt_BR.mo.
Upload the .po and .mo files you just created to the .../languages folder. Make sure these files are in the same directory as the default.pot one.
There is a trx-effects.pot file in .../wp-content/plugins/trx-effects/languages directory.
Generate the .po and .mo files according to your language. See the file names on the example below:
trx-effects-pt_BR.po, trx-effects-pt_BR.mo.
Make sure that the language of your files is the same as in your WordPress admin panel > Settings > General Settings section.

For more information on how to use Poedit, please check the following resources:

Custom Websites are usually the most important part of an online marketing campaign. A properly built custom website can help you get the most results from your marketing efforts. Our team can do it for you.

Please, find some of our offers below:

You can check the full list of offers here.

Thank you for purchasing our plugin. We are happy that you are one of our customers.
If you come up with any plugin-related questions that are beyond the scope of this help file, feel free to contact us. We will respond as soon as possible (within 24 – 48 hours, usually faster). We are open from 10am to 7pm (CET), from Monday till Friday.

Documentation for Visual Effects
& Animation

General Information