Animated Effects

Versions of Zentools 1.13+ have the capacity to create animated effects for any of the layout items in any Zentools layouts. The animations are added to content items on an item by item basis via the meta keywords for the content items.

Please note that it is not possible to add animation effects when using the directory as a content source for your content.

 

An Example of animated effects in Zentools

 

How to use animation effects for your Joomla content

1. Open the Joomla content item you want to add the effect to

2. Click on the Publishing tab in the edit pane.

3. Look for the field called Meta Keywords

4. Add the word "animate" as the first word in the text area.

5. Add a space after the word animate.

6. Next add the direction that you would like your items to slide / fade in from separated by the | symbol.

Example:

animate left|right|bottom|top

This works by targeting the items in your zentools layout. As an example adding the code above will result in:

  • The first item in your layout animating from the left
  • The second item in your layout animating from the right
  • The third item in your layout animating from the bottom
  • The fourth item in your layout animating from the top.
  • Any structural tags such as columns do not have an animation applied to it, however you still need to attach an animation direction to it. The example above is applied to the demo from above as per the screenshot below.

 

Adding more items

Any other items in the layout will not have an animation applied to them. However if you wish to apply an animation to more items then you would just append your desired effect as per the snippet below:

animate left|right|bottom|top|bottom

 

 

 


Back to top