Animate elements

I want to play with animations in a particular template using _uihooks and want to slide in the documents of a collection one after another, and when changing the subscription I want them to slide out and not have the new content loaded until the last document has left the template.

I could swear I have seen this somewhere, but can’t find it now.

Is this even possible with _uihooks?

My only bookmark to this topic is http://www.webtempest.com/meteorjs-animation

1 Like

If you don’t necessarily require reactive updates (insert/remove) to the list of visible items on the page, you could use this approach to get a static list of the items that ought to appear, and then iterate the list to add them to the dom (with animation) one by one and do the same for unloading the list.

This is not exactly a _uihooks approach, but would probably work well.

Thanks for the responses. I think I will experiment a little more with _uihooks.

I found stagger.css which accomplishes the desired effect in combination with animate.css for up to 10 elements. Unfortunately there is no hook that allows to defer template destruction until all elements are removed …

Create a template instance variable on ListView template which is a counter starting at 0.

<!-- in ListView template -->
{{#each posts}}
 {{#with postWithIndex}}
  {{> post}}
 {{/with
{{/each}}

Write a template helper called postWithIndex which increments self.count and returns _.extend(this, {index: self.count-1}).
Instantiate a reactive global counters:

//globally
currentIndex = new ReactiveVar(0);

In the rendered callback for each post, make the container element display: none initially. Since the global counter is reactive, we can listen to when it becomes equal to the template’s index. When they are equal, you can do some fancy jQuery which is your animation. When the animation is complete (jQuery will usually provide a callback) run currentIndex.set(this.data.index+1), which will trigger the jQuery code in the rendered function for the next index.

In this way, you have UI effects for post N+1 which happen only after UI Effects for post N are complete.

At the end of this process, your currentIndex index count will be the length of the cursor. You can listen to the cursor (observeChanges) and when something is removed, you can decrement the count. Don’t start jQuery for new cursor until the count goes to zero. But this assumes both subscriptions are orthogonal. If there is overlap, the count may not necessarily go back to zero. You can manipulate some of these ideas, hope this helps.