Uikit Switcher with data-uk-scrollspy

I have a problem with using animations along the switcher. I know there exist data-uk-switcher="{connect:'#my-id', animation: 'fade'}" but i want to animate each object inside div differently. This does work, when the page load, but after i click on button, to switch the content, nothing is displayed. Here is my code :

    <div id="home" class="uk-width-1-2 panel-left uk-panel uk-switcher">
        <div ng-repeat="obsah in obsah">
            <h1 class="uk-margin-large-top" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:100}">{{ obsah.h1 }}</h1>
            <h2 data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:300}">{{ obsah.h2 }}</h2>
            <h3 class="uk-text-muted" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:500}">{{ obsah.h3 }}</h3> 
            <p data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">{{ obsah.text }}</p>
        </div>                                                                   
   </div>

and the switcher

       <nav class="uk-navbar uk-margin-large-top uk-navbar-flip">
            <ul class="uk-navbar-nav" data-uk-switcher="{connect:'#home'}">
                <li><a href="#" class="active">DOMOV</a></li>
                <li><a href="#">SNAKE</a></li>
                <li><a href="#">NEVIEM</a></li>
                <li><a href="#">O MNE</a></li>
            </ul>
       </nav>

Solution

I've found a workaround, rather than a solution. You can't use the scrollspy, but you can use the animation classes. The problem with animation classes is that there is no delay option. But you can time the duration of the animation, if you add your own css classes. This suits your purposes.

Also, you need to put your <h1> etc inside a <ul><li>element, or your switcher won't work. I've adapted a fiddle from one of the examples on the getuikit.com website:

<div class="uk-width-medium-1-4">
<nav class="uk-navbar uk-navbar-flip uk-margin-large-top">
<ul class="uk-navbar-nav " data-uk-switcher="{connect:'#nav-content'}">
  <li class=""><a href="">1</a></li>
  <li class=""><a href="">2</a></li>
  <li ><a href="">3</a></li>
 </ul>
 </nav>
</div>
 <div class="uk-width-medium-3-4">
   <ul id="nav-content" class="uk-switcher">
     <li class="uk-animation-slide-left uk-animation-1" aria-hidden="true">Hello!</li>
     <li class="uk-animation-slide-left uk-animation-3 uk-active" aria-hidden="false">Hello again!</li>
     <li class="uk-animation-slide-left uk-animation-9" aria-hidden="true">Bazinga!</li>
  </ul>

</div>

And here a the css adaptions:

.uk-animation-9 {
-webkit-animation-duration: 9s;
 animation-duration: 9s;
 }
.uk-animation-3 {
 -webkit-animation-duration: 3s;
 animation-duration: 3s;
}
 .uk-animation-1 {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
}
 .uk-animation-5 {
  -webkit-animation-duration: 5s;
   animation-duration: 5s;
 }

Here's the fiddle : https://jsfiddle.net/wannieboy/vo4zz3yf/