Page 17 of 23
[heading size="h2" style="uk-module-title"]Animation[/heading]
To add animation to any component, use the [animate] shortcode. To learn more about the animation classes, visit the animation component page.
[line_break/]
[badge style="note"]markup[/badge]
[code]
[animate animation="fade" delay="100"]
your elements here
[/animate]
[/code]
[line_break/]
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 |
[line_break/]
[heading size="h3" style="uk-module-title"]Example[/heading]
[line_break/]
[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]
[line_break/]
[toggle_code open="false" title="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]
[/toggle_code]
