ReactiveVar as Data- & Communication-Layer for Animations

Hi awesome community,

what do I mean by this headline:

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

const template = Template[ 'myDomObj' ];

        const instance = Template.instance();
        return instance.x.get();

template.onCreated( function(){
    let instance = this;
    let { initX: x = 0, initY: y = 0 } =;
    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 );

    }, 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.

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

Just use velocity. :slight_smile:

1 Like

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…

I have not seen any issues with event bindings.

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