Animations

{headline type=”h2″ style=”heading-single” align=”text-center” color=”color-theme” text=”Animations when a Element becomes visible”}

Here are some examples how to use the Shortcodes for the Animations. These Animation Effect will be activated when a Element, no matter which one, becomes visible, means when it comes into the Viewport.

{spacer height=”30px”} {alert style=”success”}Best of all: you can use the Animations on the Module Class Suffix, so you can animate nearly every element!{/alert} {spacer height=”40px”} {row} {col5}{animate effect=”bounceIn”}{/animate}{/col} {col7}

Animation bounceIn

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”bounceInDown”}{/animate}{/col} {col7}

Animation bounceInDown

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”bounceInLeft”}{/animate}{/col} {col7}

Animation bounceInLeft

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”bounceInRight”}{/animate}{/col} {col7}

Animation bounceInRight

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”bounceInUp”}{/animate}{/col} {col7}

Animation bounceInUp

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeIn”}{/animate}{/col} {col7}

Animation fadeIn

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInDown”}{/animate}{/col} {col7}

Animation fadeInDown

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInDownBig”}{/animate}{/col} {col7}

Animation fadeInDownBig

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInLeft”}{/animate}{/col} {col7}

Animation fadeInLeft

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInLeftBig”}{/animate}{/col} {col7}

Animation fadeInLeftBig

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInRight”}{/animate}{/col} {col7}

Animation fadeInRight

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInRightBig”}{/animate}{/col} {col7}

Animation fadeInRightBig

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInUp”}{/animate}{/col} {col7}

Animation fadeInUp

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInUpBig”}{/animate}{/col} {col7}

Animation fadeInUpBig

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”flipInX”}{/animate}{/col} {col7}

Animation flipInX

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”flipInY”}{/animate}{/col} {col7}

Animation flipInY

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”lightSpeedIn”}{/animate}{/col} {col7}

Animation lightSpeedIn

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”rotateIn”}{/animate}{/col} {col7}

Animation rotateIn

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”rotateInDownLeft”}{/animate}{/col} {col7}

Animation rotateInDownLeft

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”rotateInDownRight”}{/animate}{/col} {col7}

Animation rotateInDownRight

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”rotateInUpLeft”}{/animate}{/col} {col7}

Animation rotateInUpLeft

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”rotateInUpRight”}{/animate}{/col} {col7}

Animation rotateInUpRight

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”rollIn”}{/animate}{/col} {col7}

Animation rollIn

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {toggle1 title=”Shortcode”}

{animate effect="bounceIn"}Your Content or Element here{/animate}  Or use the Module Class Suffix: animation bounceIn Please do not forget the whitespace in front of animation)  Possible animation names:  bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig flipInX flipInY lightSpeedIn rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rollIn

{/toggle}

Posted on by GM in Features Leave a comment

Add a Comment