Animation

Shortcodes - Animation

Page 17 sur 24

To add animation to any component, use the [animate] shortcode. To learn more about the animation classes, visit the animation component page.

markup

[animate animation="fade" delay="100"]
your elements here
[/animate]

The [animate] shortcode parameters are as follows:

Parameters	Description
`animation`	Set the animation type. The animation options can be: `slide-top, slide-bottom, slide-left, slide-right, fade, scale-up, scale-down`
`delay`	Set the animation delay in milliseconds. E.g 200

Example

One third

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

One third

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

One third

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Show code


[grid]
[column size="1-3"]
[animate animation="slide-bottom" delay="100"]
[heading size="h3" style="uk-module-title"]One third[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/animate]
[/column] 

[column size="1-3"]
[animate animation="slide-bottom" delay="300"]
[heading size="h3" style="uk-module-title"]One third[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/animate]
[/column] 

[column size="1-3"]
[animate animation="slide-bottom" delay="500"]
[heading size="h3" style="uk-module-title"]One third[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/animate]
[/column]
[/grid]