Elements

If you can dream it, you can do it

Animation

To add animation to any component, use the uk-animate-{transition} class. To learn more about the animation classes, visit the animation component page.


markup
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:500}">
  your elements here
</div>

The data-uk-scrollspy attribute parameters are as follows:

Parameters Description
cls Set the animation type. The animation options can be:
uk-animation-slide-top, uk-animation-slide-bottom, uk-animation-slide-left, uk-animation-slide-right, uk-animation-fade, uk-animation-scale-up, uk-animation-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

<div class="uk-grid" data-uk-grid-margin> <div class="uk-width-medium-1-3"> <div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:100}"> <h3 class="uk-module-title">One third</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div> </div> <div class="uk-width-medium-1-3"> <div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:300}"> <h3 class="uk-module-title">One third</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div> </div> <div class="uk-width-medium-1-3"> <div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:500}"> <h3 class="uk-module-title">One third</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div> </div> </div>
demo