Using Greensock with Meteor Templates

Question

I'm trying to animate a div in a Meteor template with TweenLite - I've installed the gsop package.

My template html:

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

my helper:

$(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);
});

My CSS, I'm using Bootstrap but also this file:

#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;
}

I get no errors but the transition doesn't happen, it snaps to the final location. Also it seems to move everything in the template instead of the specific target. If I log the div's width before the timer fires it returns null, otherwise if I log from within the timed function it returns the correct pixel width.

I'm totally lost, any ideas?

Thanks.

UPDATE: I've also tried to defer the function after the template is rendered. This fixes the null issue but doesn't stop the tween effecting everything in the yield.

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

Tortex Tortex · Accepted Answer · 2014-11-17T18:52:32

The answer came from the Greenock forum:

http://greensock.com/forums/topic/9575-using-greensock-with-meteor/

Using Greensock with Meteor Templates

2 Answers