Show/Hide based on helper

[bitomule]

First, thanks for your awesome work. This package works really well.

I'm trying to create a popup animation based on a helper condicional, I have something like this:

<template name='popup_one'>
    {{#if show}}
            {{#AnimateWithVelocity}}
                  {{ > popup_one_popup}}    
            {{/AnimateWithVelocity}}
    {{/if}}
</template>

It works perfect when show is true (It uses the animation defined inside popup_one_popup template top div) but when show it's false it just hides without animation.

Am I doing something wrong or Meteor doesn't trigger the hook when some html is hidden using a helper.

Thanks ;)

[frozeman]

I didn't tried this with a template inside the {{#AnimateWithVelocity}} block helper. Can you try putting the helper inside the template?

Did you specified the attributes on the to-animate elements, or do you forgot to specify the data-from-value?

It actually should work, as the package only uses the meteor UI hooks.

[bitomule]

Hi @frozeman ,

I've tried with {{#AnimateWithVelocity}} helper inside the template, inside {{#if show}} and also outside. I'll create a small sample app and test it there, I just wasn't sure if meteor hook works on this cases. I'll post results here.

[frozeman]

it actually should. In my app use the following and it animates in and out:

{{#if something}}
        {{#AnimateWithVelocity}}
            <div class="dimmContainer" data-animate data-property="opacity" data-duration="200" data-from-value="0" data-to-value="1"></div>
        {{/AnimateWithVelocity}}
{{/if}}

[bitomule]

I'm trying with other template and it works well, I'll try to find why it doesn't work with the other template.

[frozeman]

please do so, thanks

[bitomule]

I've fixed it, I just have to follow exactly that extructure:

• if something

• AnimateWithVelocity

• Template
• data-animate elements

What I was trying was included one single if helper for multiple animation divs, that doesn't work.

[frozeman]

hm but should actually work....

[bitomule]

Maybe I was doing something wrong or the problem was on animation parameters. Now I have a "complex" case with easing, 2 templates and all is working.

btw, I'll try to add about easing in readme.

[bitomule]

Hey @frozeman,

I was working on an example and it doesn't work.I can't find why. It's just a helper defined array based on a session variable that runs an each loop on the template. Fade in works only the first time data is added. Example is here: https://github.com/bitomule/meteor-animation-demo

Just use: Session.set('exampleArray',[]);

or: Session.set('exampleArray',['','','']);

on browser console to try it. Any idea on what could be the problem?

[frozeman]

Works for me. try Session.set('exampleArray',[1,2,3,4]); and then Session.set('exampleArray',[1,2,4]);. but as you're only animation the hello, 1 just disappears.

Maybe update to the latest version of the animation helper, i included your easing, using mrt update.

[bitomule]

I see. It works for me know. Maybe it was the missing mrt update, but I added the animation helper to that project today. Thanks ;)

[frozeman]

I updated the version and it removes now the ui hooks, so putting an {{#AnimateVelocity}} block helper inside a template should work fine.

[bitomule]

Nice!