Animation

Add some cool on-scroll animation to you pages! Animation effects are easy to apply, change or remove directly from Visual Composer. They can be added to almost all layout elements: images & banners, text blocks, benefits, logos etc. Please read our online manual, take a look at admin screenshots or use dummy content to have better idea how to use animation effects.

[dt_gap height=”30″]

6 different transitions

[dt_gap height=”20″]
[dt_banner target_blank=”false” bg_color=”#2a82ec” text_color=”#ffffff” text_size=”normal” border_width=”2″ outer_padding=”10″ inner_padding=”0″ min_height=”50″ animation=”top” bg_image=”https://vacduka.hu/wp-content/uploads/2013/09/bg-solid.gif” bg_opacity=”50″ link=”https://the7.dream-demo.com/features-2/animation/top/”]

– TOP –

View live demo

[/dt_banner]

[dt_banner target_blank=”false” bg_color=”#2a82ec” text_color=”#ffffff” text_size=”normal” border_width=”2″ outer_padding=”10″ inner_padding=”0″ min_height=”50″ animation=”bottom” bg_image=”https://vacduka.hu/wp-content/uploads/2013/09/bg-solid.gif” bg_opacity=”50″ link=”https://the7.dream-demo.com/features-2/animation/bottom/”]

– BOTTOM –

View live demo

[/dt_banner]

[dt_banner target_blank=”false” bg_color=”#2a82ec” text_color=”#ffffff” text_size=”normal” border_width=”2″ outer_padding=”10″ inner_padding=”0″ min_height=”50″ animation=”left” bg_image=”https://vacduka.hu/wp-content/uploads/2013/09/bg-solid.gif” bg_opacity=”50″ link=”https://the7.dream-demo.com/features-2/animation/left/”]

– LEFT –

View live demo

[/dt_banner]

[dt_gap height=”20″]
[dt_banner target_blank=”false” bg_color=”#2a82ec” text_color=”#ffffff” text_size=”normal” border_width=”2″ outer_padding=”10″ inner_padding=”0″ min_height=”50″ animation=”right” bg_image=”https://vacduka.hu/wp-content/uploads/2013/09/bg-solid.gif” bg_opacity=”50″ link=”https://the7.dream-demo.com/features-2/animation/animation-right/”]

– RIGHT –

View live demo

[/dt_banner]

[dt_banner target_blank=”false” bg_color=”#2a82ec” text_color=”#ffffff” text_size=”normal” border_width=”2″ outer_padding=”10″ inner_padding=”0″ min_height=”50″ animation=”scale” bg_image=”https://vacduka.hu/wp-content/uploads/2013/09/bg-solid.gif” bg_opacity=”50″ link=”https://the7.dream-demo.com/features-2/animation/animation-scale/”]

– SCALE –

View live demo

[/dt_banner]

[dt_banner target_blank=”false” bg_color=”#2a82ec” text_color=”#ffffff” text_size=”normal” border_width=”2″ outer_padding=”10″ inner_padding=”0″ min_height=”50″ animation=”fade” bg_image=”https://vacduka.hu/wp-content/uploads/2013/09/bg-solid.gif” bg_opacity=”50″ link=”https://the7.dream-demo.com/features-2/animation/animation-fade/”]

– FADE –

View live demo

[/dt_banner]

[dt_gap height=”20″]

Row or column animation

[dt_gap height=”20″][dt_fancy_image type=”image” image=”https://vacduka.hu/wp-content/uploads/2013/10/animation-scr.jpg” image_alt=”animation-screen” lightbox=”true” style=”3″ width=”890″ padding=”10″ align=”left” animation=”none”]

Shortcode animation

[dt_gap height=”20″][dt_fancy_image type=”image” image=”https://vacduka.hu/wp-content/uploads/2013/08/animation-shortcode-scr.jpg” image_alt=”animation-shortcode-screen” lightbox=”true” style=”3″ width=”890″ padding=”10″ align=”left” animation=”none”]
[dt_gap height=”40″]

Shortcodes with animation setting

[dt_gap height=”20″]

[dt_list style=”1″ dividers=”true”]

[dt_list_item image=””]Banners[/dt_list_item]

[dt_list_item image=””]Teasers[/dt_list_item]

[dt_list_item image=””]Logos grid[/dt_list_item]

[dt_list_item image=””]Benefits[/dt_list_item]

[dt_list_item image=””]Call to action area[/dt_list_item]

[dt_list_item image=””]Fancy media & Single image[/dt_list_item]

[dt_list_item image=””]Text[/dt_list_item]

[dt_list_item image=””]Pull quotes and block quotes [text shortcode] [/dt_list_item]

[dt_list_item image=””]Buttons – visual &  [text] shortcode[/dt_list_item]

[dt_list_item image=””]Social icons [text shortcode][/dt_list_item]

[/dt_list]

[dt_gap height=”10″]

[dt_quote type=”blockquote” font_size=”normal” animation=”none” background=”plain”]Most of these and all other shortcodes can also be animated through row and column animation settings.[/dt_quote]