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-slide-bottom', 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-slide-bottom', 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-slide-bottom', 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>
