Our technical support team is ready to help you with any problems you may have. Submit a support ticket and we'll help you ASAP.
30 DAY GUARANTEED REFUND
Documentation aikon Revolution Animations
Abstract & Content of Documentation
aikon Revolution Animations is a Joomla! extension designed to allow any user to implement appearance / scroll triggered animations via the back-end or via a point-and-click front-end interface, on any Joomla! site.
This documentation contains information regarding:
- Initial configuration
- Creating and editing animations via the front-end
- Creating and editing 'general' animations via the back-end
The file you have downloaded is a standard Joomla! package. It contains 1 component and 2 plugins, all of which are installed as a single extension, are automatically enabled and have basic configuration applied to them already. Simply install the package you have downloaded to the Extensions Manager installer. The page should refresh several times, after which you will see the aikon Revolution Animations editor dashboard viewer.
If that does not work properly, please try the following:
- Upload the package.
- Under components, go to aikon Revolution Animations.
- If a large, 'Enable Plugin' button is displayed, click on it.
- At the bottom, there should be a gray rectangle indicating the current state of the aikon Revolution Animations – Basic Animations Plugin. Change that to 'ON', click the 'Save' button located in the top left corner of the main toolbar, and you'll be good to go.
* If any of the stages seems impossible to do – then something went wrong – please open a ticket: www.aikoncms.com/support
From the dashboard view of the aikon Revolution Animations you can configure and set the default behavior of the extension.
Pro tip - how this works: the entire configuration is in fact carried out via the system plugin of the extension. The dashboard view is designed to provide you the ability to control, monitor and configure all your plugins from one single place. In other words, if you want, you can also configure this extension via the plugin in the Plugin Manager. The display is divided into three segments: Basic Configuration, Default Animations Settings, and Plugins Area.
Enable Front-End Editing controls when and for whom the front-end animation panel (=Editor) is displayed, hence, allowing the point-and-click creation of animations. You can select "No" to never show this; "Admin Only" to show it to logged in super-admin users (who must first be logged into the front-end of the site), or 'All Users', in which case the Editor will be displayed to anyone visiting your site. Please note this creates an obvious security vulnerability, as it allows anyone to edit the animation aspect freely. We recommend you avoid this option unless you are working on a local server, or absolutely have no other choice.
Animation Panel Open, Animation Panel Displayed On, Disable Buttons & Links, Hide Frames – these features are all controlled via the animations panel in the front-end, and are covered in the relevant section below.
Fade In Site – on some occasions, you might want to set animation(s) for content element(s) that are above the fold (i.e., visible without scrolling). As the animation is applied to these elements, they may "jump" into position in a way that is visible to the user. To avoid this, you can enable the 'Fade In Site' option. This will add to your site a short fade-in effect, ultimately, hiding such "jumps".
Hide Site Overflow – it's possible that, while animating, certain elements might exit the body element (either on the left or the right), thus generating a temporary x-axis scrollbar. You can enable this option to hide that. Please note this may cause some issues due to conflicts with the layout of some site.
Default Animation Settings
This area controls the default settings for a new animation created using the animations panel. Most of this section will be explained later on in this documents in the section that explains how to use the animations panel (=Editor). However, 1 setting is very important, and should be addressed right away: Breakpoints. The animations are triggered when the subject element is scrolled into view, as the user scrolls down, after a set offset from the top or bottom (in pixels). aikon Revolution Animations allows you to set different offsets according to resolution size, meaning you can set different behaviors for mobile displays. This field controls which offsets are available. It is advisable to use your template's own breakpoint. Many templates use these breakpoints: 480,980,1921. When filling this out, you should use numeric characters only, separated by a comma (,), and increasing from left to right. For example, the 480, 980, 1921 will generate three available breakpoints: 480 and below, 980 and below, and 1921 and below. All higher resolutions will use the 1921 option. If you do not wish to set different behaviors for mobile devices, either set the default setting, or simply ignore this field.
It is recommended you set this before starting to use the front-end animations panel (=Editor)!
The default offset options are based on this setting. If you set 3 breakpoints, you are expected to also set 3 offsets corresponding to them. For example, if you decide to set the bottom offset to "100,200,300", then the default behavior for triggering the animation will be when the display reaches 100 pixels 480px and below; 200 pixels for 980px and below, and 300 pixels for any other resolution.
HEADS UP! it's critical you use only numeric characters and commas, without spaces or any other special characters, or else, an error may occur. In addition, the Animation Panel Color Scheme option will allow you to change the color scheme of the animations panel, in case it is not clearly visible over your site (due to the site's color scheme).
Animation plugins status:
This section indicates the state of your existing plugins for aikon Revolution Animations. These are used to determine which animations are supported by the extension. The package you have downloaded includes the Basic Animations Plugin – designed to get you started with a large variety of animations, courtesy of the well-known animate.css. At least one such plugin must be enabled in order for the extension to function properly. You can enable and disable the plugins from here. Just don't forget to use the 'Save' button in the top toolbar to actually save the changes you make.
Pro tip – Animation Plugins: notice these are standard Joomla plugins, which belong to the 'Animations' group. Each such plugin implements three methods:
1. onBeforeDisplayAnimationOptions(&$arrAnimations) – allows you to add options to an array representing the animations available for the selection. Use an array where the keys represent a CSS class name to be added and removed in due time by the extension, and the value is the name which is displayed for the user to select.
3. onBeforeGenerateAnimationOptions (&$arrAlwaysVisible) – allows you to note for some of your animations that they are not appearance animations. They just happen, but there is no need to change the visibility of the item(s) before or after the animation. An example is our 'jello' animation. Modify $arrAlwaysVisible by adding elements. Each is a string that is identical to your animation name (which is also the class applied to the element to animate it).
See our Basic Animations Plugin to get an example.
Using the Front-End Animations Panel (=Editor)
When the Editor is active (i.e., enabled for all users or only for admins; and you are logged in as an admin in the front-end), it will be displayed on your website and can be either opened or closed. If it's closed, a small button will appear. Click on it and the Editor will open.
When using the Editor for the first time, a walkthrough tutorial is supposed to appear. This will guide you through the basic steps for creating animations. You can activate this again by clicking the 'Need help?' button located in the bottom of the Editor. Please note: the Editor may have internal scrolling if you are using a laptop screen.
This section is divided as follows:
- Top General Controls
- Form Overview
- A step-by-step guide to creating your first animation
Before We Begin
- The front-end animations panel will always attempt to animate the specific element you are requesting. If, for example, you pick an article image, it will attempt to only animate that specific image in that specific article. Assigning the same content to different pages may be considered "different" enough by the panel, so that the element will not be animated in another menu item. In this case, you can set the animation for that as well (if you want). If, however, you wish to animate item(s) based on a 'rule' such as "the main image of all articles", please refer to the next section.
- The Editor relies on the structure of the site output. If you change the output of the page, you may, in some cases, need to reconfigure the animations accordingly.
- A 'Frame' is a rectangle placed by the editor over elements that are animated, and is designed to highlight which element(s) already have animation(s), thus allowing you to click on them in order to edit the animation settings. Notice 1 such frame will always be "Active". It will be marked as "Current" and will appear in green color. 'Save' and 'Delete' actions will always be applied to the current frame / element.
Pro tip – how this works: the Editor tries to generate a CSS selector for the element you choose (which is displayed at the bottom of the Editor, for your reference). This is then saved and used to activate the animation. If you add useful ID and Class attributes to the page, the chances of the animations being damaged due to output change for the page, will decrease dramatically, as the Editor can then use those, instead of more general selectors.
General Options Toolbar
On the top of the animations panel you will see a toolbar which includes 5 buttons.
Mirror Editor (=opposite arrows) – allows you to move the Editor to the other side of the display, so that you can click and animate elements which may be hidden behind it.
Show/Hide Frames (=rectangle with pointer) – animated element(s) are usually marked with a 'Frame', (=a rectangle), which shows that they are animated, and allows you to edit their existing animation. Use this button to hide and restore them. This is mainly useful when you want to refresh the page to see how it looks – without having anything in the way.
Disable / Enable Buttons & Links (=linked chain) – sometimes, you may want to animate buttons and links, but clicking on these will unfortunately navigate you away from the page(!) This option does it's best to automatically prevent this, by disabling all links and buttons on page (so that you can animate them). It is possible, however, that these buttons, which are controlled by other extensions, will have scripts handling them, in which case, the Editor will not be able to turn them off.
Delete Current Animation (=trash can) – use this to delete the current animation. If you have not yet set any animation – this button won't do anything.
Close Editor (=X) – use this to hide the Editor (and to view your site better). A smaller-sized button will be displayed as a floating ribbon, allowing you to re-open the Editor.
The form of the Editor is always bound to an animated element, i.e., the active frame. This, unless of course you have no animations on the page. The form displays the animation ID, and allows to set the preferred animation for the element. Use the 'Preview Animations' button to see a preview of our available animations. The form has 2 toggles: 'Advanced Options' and 'Mobile Settings'.
Using the 'Advanced Options', you can set the offsets to trigger the animation, as well as additional settings such as 'Delay','Duration' and 'Iteration'. Hover over the setting labels to see explanatory tooltips. 'Mobile Settings' allows you to set different offsets to different resolutions. The available fields depend on the breakpoints you have set in the aikon Revolution Animation component dashboard (or system plugin). If you have not already set that, it is ecommended you go back to the previous section of this document, and read about this option.
In addition, at the very bottom of the form you will be able to set a color to the animation frame. This is solely for your convenience – use it in whatever way you see fit. While the Editor is off, this option does not affect anything for your users.
Use the 'Save' button to save your animation from the front-end(!). The page will not refresh. The 'Restore Defaults' button will restore your page to default settings - based on the settings defined in the component at the back-end.
Creating Animations – Step-by-Step Guide
Are you ready for some super simple steps to creating awesome animations on the fly? Cool!
Just double-click whatever's on the page you want to animate. Use the top 'Disable Links' button (if you've got button(s) or link(s) you want to animate). A frame will then appear around the element. Simply fill out the preferred settings in the form on the right (or leave as-is, if you like the default animation settings), and hit 'Save'. That's it - you're done!!
This frame will now be displayed when the editor is activated on the page. Clicking on it (or on any other frame) will activate it – allowing you to edit / delete it.
Tip: turn on both the 'Hide Frames' and the 'Hide Editor' buttons. Then, refresh your page. Now you can see what you have done without going back to the administrator side, and, as a result, disabling the Editor. If you want, you can easily reopen it and activate the frames to change what you have done right there and then!
Creating and editing 'general' animations via the back-end
The Animations Viewer of the aikon Revolution Animation component allows you to create animations manually, without the need for a front-end point-and-click option. This means you can set your own selectors (which be can, as a result, much more general).
Notice the Editor is designed for novice web designers. Nonetheless, basic knowledge of CSS is required
While you can achieve practically anything using the front-end Editor in this method, it's built with another use case in mind. Notice you you control the selector manually, which means the animation(s) you create can and may affect many other elements(!): on-page buttons, article images, menus and list items – to mention but a few. Therefore, you need to create a CSS selector which will select the specific elements you want.
As in many Joomla! components, aikon Revolution Animations allows you to see a list of all the animations you have already set (via the Editor or the Animations Viewer). Simply click on the one you want to edit, or add a new one using the 'New' button.
The form for creating a single animation is very similar to the Editor form. The different offsets for breakpoints are using a single field where you are expected to enter values separated by a comma like in the dashboard. Here, you will add the selector manually into the selector field. Any valid CSS selector should work. Please note: any invalid selector(s) may generate an error!
Tip – use the note and color fields to distinguish and explain to yourself what this animation is about. In this way, you will be able to easily remember what does what. Also, it is strongly advisable to use a unique color of your choosing for animations which are designed to effect multiple elements (if you use a more "liberal" selector, many elements over many pages may be effected!). This will ensure that you can distinguish between them in the front-end of the Editor.
IMPORTANT(I): AVOID EDITING "GENERAL" ANIMATIONS USING THE FRONT-END EDITOR!
The front-end editor will generate a very specific selector when you edit the animations in the front-end: replacing your more "liberal" selector in the process! We recommend assigning to all liberal animations you create a color such as a type of red (to indicate that these are not to be changed via the Editor in the front-end, which will change the selector).
Problem: "nothing's working in the front-end. I can't see the animation(s). I can't set and/or edit new animation(s). My site has stopped working".
Reason: a jQuery conflict is most likely generating an error on the page, and, as a result, this is messing everything up.
Solution 2: download a free third-party plugin which can help you handle this issue. It's called jQuery Easy, and it's available here: http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327
Please notice: we are NOT responsible for any damage that may be caused by using the jQuery Easy plugin. The plugin needs to be installed, enabled and configured manually.
The recommended settings for this plugin are: under the 'Basic Site Options' set the 'include jQuery' field to either 'jQuery' or 'jQuery + jQueri UI' (if you need jQuery UI for your site to work). Under version select 1.8, and you'll be good to go.I f it's still not working properly, please select 'Joomla Framework' version.
If the issue is still not solved, please open a support ticket!
Problem: "I can't see any frames, and when I try to create animations, a message appears that I cannot edit the frames".
Reason: your Editor is set to 'Hide Frames'.
Solution: Set the frames to visible using the button located in the top bar of the Editor.
Problem: "when I try to save animations, something goes wrong: certain error appears, or the thing starts loading and never stops".
Reason: a third-party plugin is causing a PHP error which is sent to your browser, thus corrupting the response. Your animation may or may not have been saved.
Solution: go to the general configuration of your site (System -> Global Configuration). Under the server tab, switch "Error Reporting" to "None". Please note: this only hides the error; you may still want to address the third-party plugin which is causing this issue.
If that does not help, please open a support ticket!
Problem: the entire site is animating.
Reason: you have created an animation for the body or HTML elements of the site.
Solution: if you can, select the big frame surrounding the entire site, then delete it using the editor.
Anything else has gone wrong? Please open a support ticket - we'll do our best to help you fix the problem ASAP!