Использование Greensock с шаблонами Meteor

Я пытаюсь анимировать div в шаблоне Meteor с помощью TweenLite — я установил пакет gsop.

Мой шаблон html:

<template name="mainInit">
<div id="teaContainer">
    <h1>Tea</h1>
</div>
</template>

мой помощник:

$(document).ready(function(){
        // If the user doesn't click on Tea within 3 seconds of arriving, hint at what lies beneath
        console.log($("#teaContainer").width()); // <-- THIS RETURNS NULL -->
        setTimeout(function () {
            TweenLite.to($("#teaContainer"), 1, {css:{"margin":"25% auto auto auto"}, ease:Linear.none}); //this effects the correct div but no transition occurs instead it snaps to location
        }, 3000);
});

Мой CSS, я использую Bootstrap, но также и этот файл:

#teaContainer {
    display: block;
    width: 30%;
    height: 30%;
    margin: 65% auto auto auto;
    color: white;
    border: 1px blue solid;
}

#teaContainer h1 {
    padding: 5% 5% 5% 5%;
    text-align: center;
    font-size: 7em;
    color: black;
    border: 1px #000 solid;
}

Я не получаю ошибок, но переход не происходит, он привязывается к конечному местоположению. Также кажется, что все в шаблоне перемещается вместо конкретной цели. Если я регистрирую ширину div до того, как сработает таймер, он возвращает null, в противном случае, если я регистрирую из функции timed, он возвращает правильную ширину пикселя.

Я совсем запутался, есть идеи?

Спасибо.

ОБНОВЛЕНИЕ: я также пытался отложить функцию после рендеринга шаблона. Это устраняет проблему с нулевым значением, но не останавливает анимацию движения, влияющую на все результаты.

Template.mainInit.rendered = function() {
            console.log($("#teaContainer").width());
            TweenLite.to($("#teaContainer"), 1, {css:{"margin":"25% auto auto auto"}, ease:Linear.none});
        }