Animation Frame

[TS-VCSC-Spacer height=”20″]

Did you ever wish you could add advanced CSS3 animations to any element, even the ones that are part of the original Visual Composer plugin? The “Animation Frame” element allows you to do just that. Simple insert the frame / container elements into your row or column, set some settings such as the animation type, speed, delay, or repeat, and your are ready to go. All that is left to do is to add the element(s) inside the container that you want to be animated. It’s that easy!

[TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”info” color_icon=”#cccccc” color_title=”#cccccc” color_border=”#cccccc” color_background=”#ffffff” icon_replace=”false” panel_icon=”ts-awesome-info-circle” panel_size=”50″ panel_spacer=”15″ animations=”false” animation_effect=”ts-hover-css-” margin_top=”0″ margin_bottom=”0″]

By default, all animations are disabled on mobile devices. You can change that setting for each “Animation Frame” element individually.

[/TS_VCSC_Info_Notice]

[TS-VCSC-Spacer seperator_1=”” height=”20″ el_file=””]

Video Tutorial

[TS-VCSC-Youtube content_youtube=”http://youtu.be/HyaKGFKqb10″ video_related=”false” lightbox_play=”false” content_lightbox=”false” content_youtube_trigger=”preview” content_youtube_image_simple=”false” content_image_height=”height: 100%;” content_youtube_iconsize=”30″ content_youtube_iconcolor=”#cccccc” content_youtube_buttontext=”View Video” lightbox_group_name=”nachogroup” lightbox_effect=”random” content_tooltip_css=”false” content_tooltip_position=”ts-simptip-position-top” margin_top=”0″ margin_bottom=”0″]
[TS-VCSC-Divider divider_type=”ts-divider-border” divider_text_position=”center” divider_text_border=”#eeeeee” divider_image_position=”center” divider_image_border=”#eeeeee” divider_icon_position=”center” divider_icon_content=”transparent” divider_icon_color=”#cccccc” divider_icon_border=”#eeeeee” divider_border_type=”solid” divider_border_thick=”2″ divider_border_color=”#eeeeee” margin_top=”20″ margin_bottom=”20″][TS-VCSC-Spacer height=”20″][TS_VCSC_Animation_Frame enable=”true” animation=”bounce” css3animations_name=”Bounce” duration=”2000″ delay=”1000″ viewport=”true” infinite=”false” repeat=”1″ mobile=”false” margin_top=”0″ margin_bottom=”0″]

The following animations have been applied to standard Visual Composer elements that are not part of Visual Composer Extensions. But of course, you can apply an animation to any element, no matter which plugin it is coming from!

[/TS_VCSC_Animation_Frame]
[TS-VCSC-Divider divider_type=”ts-divider-border” divider_text_position=”center” divider_text_border=”#eeeeee” divider_image_position=”center” divider_image_border=”#eeeeee” divider_icon_position=”center” divider_icon_content=”transparent” divider_icon_color=”#cccccc” divider_icon_border=”#eeeeee” divider_border_type=”solid” divider_border_thick=”2″ divider_border_color=”#eeeeee” margin_top=”20″ margin_bottom=”20″][TS_VCSC_Animation_Frame enable=”true” animation=”shake” css3animations_name=”Shake” duration=”2000″ delay=”1000″ viewport=”true” infinite=”false” repeat=”1″ runonce=”true” mobile=”false” margin_top=”0″ margin_bottom=”0″][TS_VCSC_Posts_Slider_Standalone limit_posts=”false” posts_limit=”25″ show_content=”excerpt” cutoff_characters=”400″ show_button=”true” content_target=”_parent” content_read=”Read Post” datetime_translate=”true” date_format=”F j, Y” time_format=”l, g:i A” show_featured=”true” show_share=”false” show_categories=”false” show_tags=”false” show_metadata=”true” show_avatar=”false” show_editlinks=”false” slider_type=”owlslider” posts_slide=”4″ animation_in=”ts-viewport-css-flipInX” css3animations_in=”Flip In X” animation_out=”ts-viewport-css-slideOutDown” css3animations_out=”Slide Out Down” animation_mobile=”false” flex_animation=”slide” auto_height=”true” page_rtl=”false” auto_play=”false” show_playpause=”false” show_bar=”false” bar_color=”#dd3333″ show_speed=”5000″ stop_hover=”true” show_navigation=”true” show_dots=”true” flex_navigation=”true” margin_top=”0″ margin_bottom=”0″][/TS_VCSC_Animation_Frame]
[TS-VCSC-Divider divider_type=”ts-divider-border” divider_text_position=”center” divider_text_border=”#eeeeee” divider_image_position=”center” divider_image_border=”#eeeeee” divider_icon_position=”center” divider_icon_content=”transparent” divider_icon_color=”#cccccc” divider_icon_border=”#eeeeee” divider_border_type=”solid” divider_border_thick=”2″ divider_border_color=”#eeeeee” margin_top=”20″ margin_bottom=”20″]
[TS_VCSC_Animation_Frame enable=”true” animation=”bounce” css3animations_name=”Bounce” duration=”2000″ delay=”4000″ viewport=”true” infinite=”false” repeat=”1″ mobile=”false” margin_top=”0″ margin_bottom=”0″]
[/TS_VCSC_Animation_Frame]
[TS_VCSC_Animation_Frame enable=”true” animation=”spin” css3animations_name=”Spin” duration=”2000″ delay=”7000″ viewport=”true” infinite=”false” repeat=”1″ mobile=”false” margin_top=”0″ margin_bottom=”0″]
[/TS_VCSC_Animation_Frame]
[TS_VCSC_Animation_Frame enable=”true” animation=”tada” css3animations_name=”Tada” duration=”2000″ delay=”10000″ viewport=”true” infinite=”false” repeat=”1″ mobile=”false” margin_top=”0″ margin_bottom=”0″]
[/TS_VCSC_Animation_Frame]