Title: Animate Your Content Author: Fides IT Published: 25, Febreru de 2014 Last modified: 26, Febreru de 2014 --- Guetar plugins ![](https://ps.w.org/animate-your-content/assets/banner-772x250.png?rev=865782) This plugin **hasn’t been tested with the latest 3 major releases of WordPress**. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. ![](https://s.w.org/plugins/geopattern-icon/animate-your-content_a8d8eb.svg) # Animate Your Content By [Fides IT](https://profiles.wordpress.org/fides-it/) [Download](https://downloads.wordpress.org/plugin/animate-your-content.zip) * [Details](https://ast.wordpress.org/plugins/animate-your-content/#description) * [Reviews](https://ast.wordpress.org/plugins/animate-your-content/#reviews) * [Installation](https://ast.wordpress.org/plugins/animate-your-content/#installation) * [Development](https://ast.wordpress.org/plugins/animate-your-content/#developers) [Support](https://wordpress.org/support/plugin/animate-your-content/) ## Description The animate your content plugin makes it possible to animate existing html by placing shortcodes around content. [Watch Some EXAMPLES Here With Code Samples](http://www.fides-it.nl/animate-content-plugin/) #### Features * fly blocks from the left/right/top/bottom of your screen * different bouncing effects can be configured * rotate a block of text and/or images with any rotation angle * set total elapsed time of animation per animation element * set delay from start per animation element * set animation effects on container element, any nested elements will inherit the effects from the container. * set ‘delay_increment’ on animation set, which automatically adds an incremental delay on any child elements ## Installation 1. Install and activate this plugin 2. Place shortcodes in your content as described below. To get started, look at the [examples with code samples on my site](http://www.fides-it.nl/animate-content-plugin/). #### Shortcode Installation Example [animation-set style=”” class=”” id=”” ] [animation-element] .. your content here .. [/animation-element] [animation-element] .. your content here .. [/animation-element] [/animation-set] #### HTML shortcode attributes Any attributes placed on an `animation-set` will be automatically applied to any nested `animation-element`s. It is however possible to override an `animation-set` attribute per `animation-element`. The html attributes `style` and `class` can be used on both `animation-set` and ` animation-element`. The `id` attribute can only be used on an `animation-set`. #### Animation shortcode attributes * `effect` : one of ( slide_from_left , slide_from_right , slide_from_top , slide_from_bottom, fade_in , rotate ). No default and thus a required field. * `time` : the total elapsed time of the animation in seconds. Fractions are allowed. Default is 2.0 seconds. * `delay` : the delay in seconds (fractions allowed) after which the animation must start. Default is 0. * `rotation` : rotation angle in degrees. Example: 360. Only used for effect `rotate`. * `ease` : defines the method used to make a block of content bounce against the far edge of the animation. Possible values are described on [this page](http://api.greensock.com/js/com/greensock/easing/package-detail.html). Examples are ‘Bounce.easeIn’, ‘Cubic.easeOut’, ‘Elastic.easeInOut’, etc. * `delay_increment` : this attribute is only allowed on an `animation-set` element. It defines the incremental delay in seconds (fractions allowed) that must be added to each subsequent child `animation-element`. The default value is 0. #### Example * Text flying in from the top, left, right and bottom of the screen. * Each animation takes 3 seconds. [animation-set ease=”Bounce.easeIn” time=”3″] [animation-element effect=”slide_from_top”] Hello World (from top)![/animation-element] [animation-element effect=”slide_from_left”] Hello World (from left)![/animation-element] [animation-element effect=”slide_from_right”] Hello World (from right)![/animation-element] [animation-element effect=”slide_from_bottom”] Hello World (from bottom)![/animation-element] [/animation-set] #### Example * Images flying in from the left, with half a sec delay in between. * Each animation takes 1.5 seconds. * The container DIV gets a css class attribute for custom styling purposes. [animation-set effect=”slide_from_left” time=”1.5″ ease=”Bounce.easeIn” delay_increment =”0.5″ class=”myCssClass”] [animation-element][/animation-element] [animation-element][/ animation-element] [animation-element][/animation-element] [animation-element][/ animation-element] [/animation-set] #### Example * Text rotates 360 degrees in 1.5 seconds. [animation-set effect=”rotate” time=”1.5″ rotation=”360″] [animation-element]Hello World[/animation-element] [/animation-set] #### Example * Fade in the page title and afterwards, fade in the content below the title * Total animation time is 1.5 seconds [animation-set effect=”fade_in”] [animation-element time=”1.5″] My Page Title [/animation-element] [animation-element time=”1.5″ delay=”1.5″] Here is some more content that will be faded in later ```

Enjoy

``` [/animation-element] [/animation-set] ## FAQ Can I add a question to this FAQ? Yes, please send me a message via www.fides-it.nl/contact 🙂 ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Animate Your Content” is open source software. The following people have contributed to this plugin. Contributors * [ Fides IT ](https://profiles.wordpress.org/fides-it/) [Translate “Animate Your Content” into your language.](https://translate.wordpress.org/projects/wp-plugins/animate-your-content) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/animate-your-content/), check out the [SVN repository](https://plugins.svn.wordpress.org/animate-your-content/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/animate-your-content/) by [RSS](https://plugins.trac.wordpress.org/log/animate-your-content/?limit=100&mode=stop_on_copy&format=rss). ## Changelog * v1.0 – Maiden voyage ## Meta * Version **1.0.0** * Last updated **12 años ago** * Active installations **20+** * WordPress version ** 2.1 or higher ** * Tested up to **3.7.41** * Language * [English (US)](https://wordpress.org/plugins/animate-your-content/) * Tags * [animated](https://ast.wordpress.org/plugins/tags/animated/)[animation](https://ast.wordpress.org/plugins/tags/animation/) [cool](https://ast.wordpress.org/plugins/tags/cool/)[CSS3](https://ast.wordpress.org/plugins/tags/css3/) * [Advanced View](https://ast.wordpress.org/plugins/animate-your-content/advanced/) ## Ratings 3 out of 5 stars. * [ 0 5-star reviews ](https://wordpress.org/support/plugin/animate-your-content/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/animate-your-content/reviews/?filter=4) * [ 1 3-star review ](https://wordpress.org/support/plugin/animate-your-content/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/animate-your-content/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/animate-your-content/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/animate-your-content/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/animate-your-content/reviews/) ## Contributors * [ Fides IT ](https://profiles.wordpress.org/fides-it/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/animate-your-content/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=7AHC5YEQ8Y2TG)