Shortcodes

If you can dream it, you can do it

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="scale-up" 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="scale-up" 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="scale-up" 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]

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.