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

help
1

#Situation
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.

#Problem
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?

#Example

Template:

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

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

Helpers & Events:

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

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

Any help is much appreciated. :slight_smile:

2

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:

3

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

4

https://atmospherejs.com/percolate/momentum

3 Likes
5

Thanks. This seems to do the trick.

6

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

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

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!

7

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

8

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