on Javascript, Meteor, Tools, Uncategorized tagged ,

Meteor template animation helper

UPDATE 04.06.2015

Better use the new template animation helper, which uses ui_hooks to start animations: https://atmospherejs.com/frozeman/animation-helper

UPDATE 23.10.2013 You can now also pass a template name to the {{AnimateTemplate "..."}} helper, this will render the template in place, switching a hidden class to animate on the element(s) with the class animate. Additionally the data context of this template gets the _templateAnimationKey, so you can manually fade the template out. To do that call the following inside a helper or event of that template:

Update made BLAZE ready, the new render engine of meteor

View/Session.set(this._templateAnimationKey, false);

If you’re inpatient check out atmosphere.

I love meteor for its simplicity, but there is still something annoying coming up once in a while when working on a project.

Animations!

As cool as reactivity is, its bad for old style animation, as meteor will re-render elements under the hood and therefor messes with manually add classes or styles.

As long as i looked for a solution, when it comes to animate templates, let them smoothly fade or move in, it looked like almost impossible. But working all night i think i found a pretty decent solution.

My solution uses a wrapper template called template-animation-helper which uses its reactive helpers to react on a Session key change. When this Session key changes, containing a template, it will render this template at the place of the {{AnimateTemplate}} helper and add and removes a hidden class on the element, with a class name animate.

The element with class name animate then can have transition effects add in CSS, like opacity or translate. When the template gets removed, by setting the Sessions key to false, it adds the hidden class back again to fade/animate it out and removes the template, after the duration ended.

Usage

Use the {{> AnimateTemplate}} helper or AnimateTemplate method and pass it a Session or View key name like {{> Animate placeholder=”myKey”}}. Then use the Session/View.set('keyName', 'templateName') to render a template at this position.

Additional you have to add a animate class to element(s) inside your template, which you want to animate. The animate class should put your elements in the state, before your template is visible. So that when the animate class gets removed a transition to its visible state is happening.

An example of dynaimcally showing/removing a templates

// HTML

<template name="myTemplate">
    <div class="animate myTemplateWrapper">
        ...
    </div>
</template>

// CSS

.myTemplateWrapper {
    opacity: 1:
    transition: opacity 2s;
}
.myTemplateWrapper.animate {
    opacity: 0;
}

Place a template animation helper for mytemplateKey somewhere in your app:

{{> Animate placeholder="myKeyName" context=someData}}

To fade in the template from above at the position of the helper call

View/Session.set('myKeyName', 'myTemplate');

To fade out the template call

View/Session.set('mytemplateKey', false);

Return an AnimateTemplate from inside a helper

// HTML

{{> myhelper}}

// JS
Template.myTemplate.myhelper = function(){
    return AnimateTemplate({placeholder: 'myTemplateKey'});
};

// Then you can render the template by calling
View/Session.set('myTemplateKey','templateName');

The {{#Animate}} block helper

{{#Animate}} block helper, which will remove any animate class from its child elements when rendered. Additionally you can provide an delay parameter to set a delay (in ms) for the animation to start.

{{#Animate delay=200}}
    <div class="animate">
        animates this content here
        (you must provide some css transitions for the animate class)
    </div>
{{/Animate}}

Try it yourself, just install the package with

$ mrt add template-animation-helper

Or get it directly from github.

View Manager

I also created a package called, view-manager which works perfectly with this one. See my next post for more.