[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]