Animated on View

Animations

Animation can be used nearly everywhere in this Template. There are many different Animation Types available and they are working with nearly all Shortcodes or you can use the Animations on the Module Class Suffix, so you can animate nearly every element!

CSS Driven Animations
Available at nearly every Element

27 different In Effects
Animation Delay and Duration can be set

Animations on mobile Devices:

We have disabled the Animations on Mobile Devices as on older ones it can be very heavy for the Performance! You can turn it on but we don't recommend this!

Attention:

We have made the Animations extra slow on this Page that you can better see them! Of course you can define your own Delay and your own Duration for each Animation!

Animation: bounceIn

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.

Animation: bounceInDown

Animation: bounceInLeft

Animation: bounceInRight

Animation: bounceInUp

Animation: fadeIn

Animation: fadeInDown

Animation: fadeInDownBig

Animation: fadeInLeft

Animation: fadeInLeftBig

Animation: fadeInRight

Animation: fadeInRightBig

Animation: fadeInUp

Animation: fadeInUpBig

Animation: slideInLeft

Animation: slideInRight

Animation: slideInUp

Animation: slideInDown

Animation: flipInX

Animation: flipInY

Animation: lightSpeedIn

Animation: rotateIn

Animation: rotateInDownLeft

Animation: rotateInDownRight

Animation: rotateInUpLeft

Animation: rotateInUpRight

Animation: rollIn

Shortcode

Minimal Shortcode

{animation animation="bounceIn"}Elements{/animation}

Shortcode with some Options

{animation animation="bounceIn" animationduration="2s" animationdelay="0.5s"}Elements{/animation}

Or use the Module Class Suffix: animate-me bounceIn
(Please do not forget the whitespace in front of animation)

Parameter Name	Description	Possible values	Default
class	Add a optional Class to the Shortcode
id	Add a optional unique ID to the Shortcode
animation	Activates a Animation for this Element	bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig flipInX flipInY lightSpeedIn rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rollIn slideInDown slideInLeft slideInRight slideInUp
animationduration	How long should the Animation run	Any positive Value for seconds	1s
animationdelay	Should the Animation have a delay	Any positive Value for seconds	0s