ReactiveVar as Data- & Communication-Layer for Animations

1

Hi awesome community,

what do I mean by this headline:

<template name="myDomObj">
    <div id="obj" style="transform: translateX( {{ x }}px )"></div>
</template>

'use strict';

const template = Template[ 'myDomObj' ];

template.helpers({
    x(){
        const instance = Template.instance();
        return instance.x.get();
    }
});

template.onCreated( function(){
    let instance = this;
    let { initX: x = 0, initY: y = 0 } = this.data;
    instance.x = new ReactiveVar( x );
    instance.y = new ReactiveVar( y );
});

template.onRendered( function(){
    let instance = this;
    instance.$obj = instance.$( '#obj' );

    instance.autorun( ( c )=>{
        let y = instance.y.get();
        instance.$obj.css( 'transform', 'translateY(' + y + 'px)' );
    });

    const FRAME_COUNT = 180;
    // requestAnimationFrame Abstraction
    runEveryFrame( ()=>{
        let x = instance.x.get();
        let y = instance.y.get();
        instance.x.set( x + 1 );
        instance.y.set( y + 1 );

        Tracker.flush();
    }, FRAME_COUNT );
});

My focus here is on the reactive vars and their change on every frame in order to change the css values for a fluent transition/animation.
My gut says its a really bad idea, but I am wondering if someone already tried to do that and mybe would like to share infos on how it performed, especially in a higher scale with more then only two vars.

2

yeh, this sounds like overkill - for simple animations, you should add CSS3 transitions to the elements and let hardware acceleration kick in…

if you want to do fancier physics based motion, i still would only set less frame intensive values as reactive vars and calculate movement + speed outside of the reactive computation

3

Just use velocity. :slight_smile:

1 Like
4

mitar, how do you ensure event bindings on element add/remove are done properly with velocityjs ?

or do you usually not give a care to such issues…

5

I have not seen any issues with event bindings.

These days I simply use Blaze Components which have integration for animations.