General Information

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).

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:

  1. 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.
  2. 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).
  3. The plugin updates for the single End Product (website) are free.

What is not allowed:

  1. 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.
  2. 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:

Help and Support

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:

Dynamic Background Customization
Mouse Helper Customization

Installation

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):

  1. Log into the WordPress admin panel.
  2. Navigate to Plugins > Add New and click on Upload Plugin on top of the page.
  3. Select the trx-effects.zip file and click Install Now button.
  4. 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) > ThemeREX Effects > 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

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

Plugin Modules

"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) > ThemeREX Effects > 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:

  • Mouse helper;
  • Image effects;
  • Image mask;
  • Dynamic background;
  • Background text;
  • Background slides;

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

Mouse Helper Module

This module displays dynamic suggestions when the mouse hovers over various page objects. Please make sure that this module is active before proceeding with theme customization in Appearance (WP Dashboard) > ThemeREX Effects > General tab.

PLEASE NOTE!Please also view our video tutorial.

General Settings

After the module activation, the "Mouse helper" section should appear in Appearance (WP Dashboard) > ThemeREX Effects 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.
  • 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.
  • 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 Elementor page builder in the global settings, like on the sreenshot below.

Now, proceed to the Elementor widgets panel, enable the mouse helper for a particular section/column/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;

Image Effects Module

This module adds custom 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 Elementor "Image" widget under Content tab. Here you can select the image hover effect from the drop-down list and specify the needed parameters.

Available effects on mouse hover:

  • 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, widget), navigate to the Elementor widgets panel and find the Advanced > Image mask section. Additional options appear once the image itself has been uploaded.

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 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.

Background Text Module

This module enhance the Elementor functionality by adding "Background Text" parameters to Elementor sections (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) to which the "background text" functionality you would like to apply and proceed to Edit Section > Advanced > 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:

  • Top offset and Left offset - Shift the text. The shift point is the top left corner of a section.
  • 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;
  • Marquee speed - Set the scrolling speed. If the option is set to 0, it means without scrolling.
  • Reversed movement - The background text starts moving in backwards direction.
  • Overlay image and Overlay position - Place an image (.png) over a background text line to add a "texture" effect to it.

Background Slides Module

This module allows you to create background slideshows for page rows by adding an unlimited number of background images to Elementor section (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 > Advanced > 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);
    • Zoom in/out;
    • Infinite in/out - alternate continuous zooming in/out (for single slides, without transition to the next slide);
  • Slide origin - Choose the point of application of the effect (the exact location at which the effect is applied to the image).

Plugin Translation

We recommend using Poedit software for translation-related purposes.

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

  1. Download and install Poedit software.
  2. Navigate to the trx-effects/languages/ folder and locate .pot file. Copy it to your desktop for editing.
  3. 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."
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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:

Website Customization

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:

Theme instalation

Theme instalation

Get the theme installed on your website with all the dummy content.

BUY THIS OPTION
Ready-To-Use Website

Ready-To-Use Website

The theme setup including data and images replacement for 6 pages.

BUY THIS OPTION
Must have plugins

Must have plugins

Installation and configuration of the plugins for SEO, security, and cache.

BUY THIS OPTION

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.