Animation within a Stage Gallery

This feature is now deprecated.

Note! We recommend using Revolution Slider over the content animator due being responsive and having more advanced features.

Important! When using content animator within a stage gallery you must set the Post → Stage Gallery Options → Gallery Image Content to Image (Text Overlay)

Important! Ensure the ID’s DO NOT contain special characters. Underscores _ are allowed e.g. id=”hello_text”.

Screencast

Watch the screencast for how to add the content animator shortcode to the Stage Gallery.

Example Code

[content_animator id=”hellotext” effect=”slide” margin_top=”60″ margin_left=”0″ margin_right=”0″ align=”center” float=”no” direction=”up” easing=”easeInOutElastic” delay=”200″ speed=”1200″]

Hello!

[/content_animator]

[content_animator id=”contentanitext” effect=”slide” margin_top=”0″ margin_left=”0″ margin_right=”0″ align=”center” float=”no” direction=”left” easing=”easeInOutElastic” delay=”400″ speed=”1600″]

… this is the content animator.

[/content_animator]

[content_animator id=”html5image” effect=”slide” margin_top=”170″ margin_left=”370″ margin_right=”0″ align=”left” float=”yes” direction=”left” easing=”easeInOutBack” delay=”600″ speed=”1800″]

[/content_animator]

[content_animator id=”css3image” effect=”slide” margin_top=”170″ margin_left=”0″ margin_right=”370″ align=”right” float=”yes” direction=”right” easing=”easeInOutBack” delay=”600″ speed=”1800″]

[/content_animator]

 

[content_animator id=”cooltext” effect=”fade” margin_top=”150″ margin_left=”0″ margin_right=”0″ align=”center” float=”no” direction=”left” easing=”easeInQuad” delay=”2000″ speed=”1600″]

… cool right?

[/content_animator]

Phones & Tablets Code

Because of the varying sizes of devices – the content animator is disabled on Phone and Tablets with Galleries. However the following solution has been implmented to display a static image when using a Phone or Tablet device.

Insert this at the bottom of the Post/Gallery Media Post. Change the parameters to suit your needs.

[imageeffect type=”none” align=”aligncenter” alt=”phone and table image” url=”YOUR-IMAGE-URL” link=”#” width=”980″  class=”show-on-phones show-on-tablets”]