[solved] Finding a reliable & flexible Solution for Animations? (e.g. timmyg:wow)

I’m trying to find a reliable and flexible solution for doing animations & transitions in meteor.

The timmyg:wow package seemd to be a great solution at first.
It’s dead easy to use and gives you all the power of animate.css.

Unfortunately I couldn’t get this to work with a Collection and an {{#each}}-helper.

On insert the animation is repeated for all documents.

  1. The one being inserted into the collection (nice, love it)
  2. The ones already present in the collection (not what I need)

Is there a way around that?



    <div class="container">
        {{#each products}}
            {{> product}}
    <button class="add">Add product</button>

<template name="product">
    <div class="wow fadeInLeft">
        My Product

Helpers & Events:

Products = new Mongo.Collection('products');

if (Meteor.isClient) {
        'click .add': function() {
                date: new Date()
        'products': function(){
            return Products.find();
    Template.product.onRendered(function () {
        return new WOW().init();

Any help is much appreciated. :slight_smile:

I’ve been meaning to give zhenya:reveal a try, but did not get a chance.

Why don’t you try and see if this solves your problems, and if it does, you’ll also have done me a favor :smile:

Scratch that, they do different kinds of revealing and this one’s not going to work for you. Sorry.



Thanks. This seems to do the trick.

Sorry, I’m still having trouble with this.
Love the momentum package and implemented it like so:

{{#momentum plugin='growl'}}
    {{# each products}}
        {{> product}}

This works much better, but when I refresh the page the animation is still repeated for every document.
Does anyone have a solution that triggers the animation only on insert and remove? (not on refresh)

Thanks a lot!

@nilsdannemann have you tried this package? I think the animateInitial option might be what you are looking for.

try to see if you can use a react component for this part, react component dont animation on initial insert, i have a growl animation wrapper component already made, let me know you want to try it