How to add Animate Your Content in Wordpress

• To install correctly this animate-your-content.zip .
• Fisrt Download the animate-your-content.zip to your computer
• Extract/Open animate-your-content.zip to Your Computer.
• Then, Find readme.txt file inside animate-your-content.zip and Open readme.txt .
• Now, Read the Requirements of this plugin. Which Wordpress Version and PHP Version are required to run this Plugin in Your Wordpress Site.
• Then, Follow the Tips Below.

Step-1 : Download " animate-your-content.zip " to Your Local Computer.

Step-2 : Then, Login to your " yourdomain.com/wp-admin " Dashboard.

Step-3 : Then, Click on " Plugins " + " Add New " from left Side Menu of Dashboard.

Step-4 : Now, Click on " Upload Plugin " button.

Step-5 : Now, Browse " animate-your-content.zip " Downloaded plugin from your computer, Where you downloaded " animate-your-content.zip " According to Step – 1 Above then, click on " Install Now "

Step-6 : Now, Click on " Active Plugin "

Step-7 : Then, See left Side Menu. " Animate Your Content " folder is added on left Side Menu. Now, Click on " Animate Your Content " folder.

Noted that: If you do not see " Animate Your Content " folder on left Side Menu then, see at left Side Menu " Settings " or " Tools ".

Step-8 : Now you configure yourself oR Watch video tutorial below about Animate Your Content Configurations and Settings or How to work " Animate Your Content " in your WordPress site.

After Activated Plugin According to Step-6 then,

1. Go to " Plugins " + " Installed Plugin " from Wordpress Admin Panel Leftside Menu.
2. or Direct go to: https://yourdomain/wp-admin/plugins.php
3. Then, Find " Animate Your Content " Activated Plugin from Plugin List.
4. Then, Click on " Settings " from Plugin that is Animate Your Content
5. Now, Edit/Add/Config the setting and Click on " Save Changes " button,

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 .

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