Animation Shortcode

There is a sleeper plugin on Code Canyon called Animation Shortcode which is less than perfect but brings enough to the table for $7USD to make it more than worthwhile. Like Shortcode Ultimate, another great and this case free plugin, Animation Shortcode wins  by making its use dead simple. Here is a screenshot of the Animation Shortcode popup used to create the demo button and image animations shown below.

animshort
Note there are five fields to fill in. Pick Animation is a dropdown field offering 86 different animation sequences each  of which we have shown below in button activated demos. Duration gives the length in seconds for the animation. Activation is a dropdown offering 3 events [Click, Hover and Scroll] to activate the animation. Delay gives in seconds how long the animation is delayed before display.And Content is the HTML which will be animated – lterally any HTML. I have put in sliders, images, and complex div blocks with extensive CSS Styling in the contents.

Hover over Button to see Animation for given duration
[animate_animate animation=”bounce” duration=”1.5″ activation=”hover” delay=””] [/animate_animate] [animate_animate animation=”magic” duration=”3″ activation=”hover” delay=””] [/animate_animate] [animate_animate animation=”swap” duration=”3″ activation=”hover” delay=””] [/animate_animate]
[animate_animate animation=”flash” duration=”3″ activation=”hover” delay=””] [/animate_animate] [animate_animate animation=”rubberBand” duration=”3″ activation=”hover” delay=””] [/animate_animate] [animate_animate animation=”shake” duration=”3″ activation=”hover” delay=””] [/animate_animate]
[animate_animate animation=”tada” duration=”3″ activation=”hover” delay=””] [/animate_animate] [animate_animate animation=”wobble” duration=”3″ activation=”hover” delay=””] [/animate_animate] [animate_animate animation=”twisterInUp” duration=”3″ activation=”hover” delay=””] [/animate_animate]
[animate_animate animation=”twisterInDown” duration=”5″ activation=”hover” delay=””] [/animate_animate] [animate_animate animation=”puffIn” duration=”5″ activation=”hover” delay=””] [/animate_animate] [animate_animate animation=”puffOut” duration=”5″ activation=”hover” delay=””] [/animate_animate]
[animate_animate animation=”vanishIn” duration=”5″ activation=”hover” delay=””] [/animate_animate] [animate_animate animation=”vanishOut” duration=”5″ activation=”hover” delay=””] [/animate_animate] [animate_animate animation=”perspectiveDown” duration=”5″ activation=”hover” delay=””] [/animate_animate]
[animate_animate animation=”perspectiveUp” duration=”5″ activation=”hover” delay=””] [/animate_animate] [animate_animate animation=”perspectiveLeft” duration=”5″ activation=”hover” delay=””] [/animate_animate] [animate_animate animation=”perspectiveRight” duration=”5″ activation=”hover” delay=””] [/animate_animate]
[animate_animate animation=”perspectiveRight” duration=”5″ activation=”hover” delay=””]1ann5 [/animate_animate] [animate_animate animation=”perspectiveLeft” duration=”5″ activation=”hover” delay=””]1ann6 [/animate_animate] [animate_animate animation=”bounce” duration=”5″ activation=”hover” delay=””]1annie [/animate_animate]
[animate_animate animation=”swap” duration=”5″ activation=”hover” delay=””]1ann4 [/animate_animate] [animate_animate animation=”tada” duration=”5″ activation=”hover” delay=””]1ann3 [/animate_animate] [animate_animate animation=”wobble” duration=”5″ activation=”hover” delay=””]1ann2 [/animate_animate]
[animate_animate animation=”twisterInDown” duration=”5″ activation=”hover” delay=””]1annie [/animate_animate] [animate_animate animation=”puffIn” duration=”5″ activation=”hover” delay=””]1ann6 [/animate_animate] [animate_animate animation=”swap” duration=”5″ activation=”hover” delay=””]1ann5 [/animate_animate]
 [animate_animate animation=”magic” duration=”5″ activation=”hover” delay=””]1ann4 [/animate_animate]  [animate_animate animation=”rubberBand” duration=”5″ activation=”hover” delay=””]1ann3 [/animate_animate]  [animate_animate animation=”perspectiveRight” duration=”5″ activation=”hover” delay=””]1ann2 [/animate_animate]

Animate Shortcode has three activation codes – Click, Hover, and Scroll. Click is just a simple single click on an object. Hover is equivalent to either a mouseover onto an object or mouseout from an object. Scroll is triggered by so many scroll, keypress, and swipe events that it effectively works as a onload event. It would be nice to have the Scroll event triggered by the Scroll position as seen here. Since the PHP code for Animation Shotcode is GPL, it is possible for someone to go into the code and create a more robust version of Animate Shortcode for activation events.

Meantime, here are more of the animations available as revealed by clicking this time on the buttons or images. Note the duration for the image animations is 5 seconds.

Click on  Button to see the Animation for the given duration
[animate_animate animation=”bounce” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”swashOut” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”foolishOut” duration=”3″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”foolishIn” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”holeOut” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”tinRightOut” duration=”3″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”tinLeftOut” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”tinUpOut” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”tinDownOut” duration=”3″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”tinRightIn” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”tinLeftIn” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”tinUpIn” duration=”3″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”tinDownIn” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”bombRightOut” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”bombLeftOut” duration=”3″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”bounceIn” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”bounceInDown” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”bounceInLeft” duration=”3″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”bounceInRight” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”bounceInUp” duration=”3″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”bounceOutDown” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”bounceOutLeft” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”bounceOutRight” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”bounceOutUp” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”fadeIn” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”fadeInDown” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”fadeInDownBig” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”fadeInLeft” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”fadeInLeftBig” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”fadeInRight” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”fadeInRightBig” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”fadeInUp” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”fadeInUpBig” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”fadeOut” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”fadeOutDown” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”fadeOutDownBig” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”fadeOutLeft” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”fadeOutLeftBig” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”fadeOutRight” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”fadeOutUp” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”fadeOutUpBig” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”flip” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”flipInX” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”flipInY” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”flipOutX” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”flipOutY” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”lightSpeedIn” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”lightSpeedOut” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”rotateIn” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”rotateInDownLeft” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”rotateInDownRight” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”rotateInUpLeft” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”rotateInUpRight” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”rotateOut” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”rotateOutDownLeft” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”rotateOutDownRight” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”rotateOutUpLeft” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”rotateOutUpRight” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”slideInDown” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”slideDown” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”slideInLeft” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”slideInRight” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”slideOutLeft” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”slideOutRight” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”slideOutUp” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”hinge” duration=”5″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”rollIn” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”rollOut” duration=”5″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”rollOut” duration=”20″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”tada” duration=”1″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”tada” duration=”10″ activation=”click” delay=””] [/animate_animate] [animate_animate animation=”tada” duration=”20″ activation=”click” delay=””] [/animate_animate]
[animate_animate animation=”perspectiveRight” duration=”5″ activation=”click” delay=””]1ann5 [/animate_animate] [animate_animate animation=”slideOutRight” duration=”5″ activation=”click” delay=””]1ann6 [/animate_animate] [animate_animate animation=”slideDown” duration=”5″ activation=”click” delay=””]1annie [/animate_animate]
[animate_animate animation=”wobble” duration=”5″ activation=”click” delay=””]1ann4 [/animate_animate] [animate_animate animation=”magic” duration=”5″ activation=”click” delay=””]1ann3 [/animate_animate] [animate_animate animation=”swap” duration=”5″ activation=”click” delay=””]1ann2 [/animate_animate]
[animate_animate animation=”flip” duration=”5″ activation=”click” delay=””]1annie [/animate_animate] [animate_animate animation=”fadeInDownBig” duration=”5″ activation=”click” delay=””]1ann6 [/animate_animate] [animate_animate animation=”rollOut” duration=”5″ activation=”click” delay=””]1ann5 [/animate_animate]
[animate_animate animation=”tinInDown” duration=”5″ activation=”click” delay=””]1ann4 [/animate_animate] [animate_animate animation=”bombLeftOut” duration=”5″ activation=”click” delay=””]1ann3 [/animate_animate] [animate_animate animation=”slideInRight” duration=”5″ activation=”click” delay=””]1ann2 [/animate_animate]

I have timed the various animations which all have delays set to the default of zero – and yet there appears to be slight delays in the start or completion of some of the animations. Also the image animations appear slightly different from the buttons especially when the trajectory is complex. But the underlying code is straight forward jQuery scripts so the overall performance is pretty good. Yes, many of these animations can be done with CSS3, but CSS3 is not packaged so conveniently for use as Animation Shortcode. And to find the duplicate animations in  CSS3 will not be trivial in many cases.Finally, Animation Shortcode works best with blocks of code like form fields, images,  asides, and sections and performs poorly with small text phrases and icons not wrapped in a HTML container.

Summary

Animation Shortcode is one of those plugins which you use for a specific requirement – draw attention to a promotion banner when users drag their mouse near it with a small wiggle. And suddenly you find yourself using all it over your web pages – for emphasis, or simply to draw attention. And it is so easy to use, you have to keep from over-abusing it.