Page 17 of 24
Animation
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]