Wow, we have added a new awesome Feature to the TouchM Joomla Template! Now you can very easily add Animations to nearly all Elements, when they became visible in the Browser, means you have a nice scrolling Experience when browsing the Page.

{panel-white}

{list | fa-ul}
{listing}{icon | fa-caret-right fa-li}Nice styled with a lot of CSS3 effects and techniques which works in all modern browsers{/listing}
{listing}{icon | fa-caret-right fa-li}Six different Animation Types you can choose from, all CSS3 powered{/listing}
{listing}{icon | fa-caret-right fa-li}Very easy to use, simply add a Class to the Element you want to animate when coming into Viewport{/listing}
{/list}

{/panel}

{icon | fa-flask templatecolor} General Demo

{line}

{row}
{col6}

{/col}
{col6}

Animation « from-left »

Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.

{/col}
{/row}

{line}

{row}
{col6}

{/col}
{col6}

Animation « from-right »

Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.

{/col}
{/row}

{line}

{row}
{col6}

{/col}
{col6}

Animation « from-top »

Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.

{/col}
{/row}

{line}

{row}
{col6}

{/col}
{col6}

Animation « from-bottom »

Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.

{/col}
{/row}

{line}

{row}
{col6}

{/col}
{col6}

Animation « scale-in »

Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.

{/col}
{/row}

{line}

{row}
{col6}

{/col}
{col6}

Animation « scale-out »

Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.

{/col}
{/row}

{line}

{icon | fa-flask templatecolor} General Demo

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{line}

{icon | icon-question-sign templatecolor}How to use

You can simply add a Class to every Element you want to have animated.

<h1>Headline</h1>

<h1 class="animation from-left">Headline</h1>


Of course this will also work in many Shortcodes very easy.

{toggle | Possible Animations}
animation from-left
animation from-right
animation from-top
animation from-bottom
animation scale-in
animation scale-out

{/toggle}