Attempting to add animation to a div within a Meteor template using TweenLite with the gsop package installed.
The template html code:
<template name="mainInit">
<div id="teaContainer">
<h1>Tea</h1>
</div>
</template>
The helper function:
$(document).ready(function(){
// If user doesn't interact with "Tea" within 3 seconds, provide hint
console.log($("#teaContainer").width()); // <-- RETURNS NULL -->
setTimeout(function () {
TweenLite.to($("#teaContainer"), 1, {css:{"margin":"25% auto auto auto"}, ease:Linear.none}); //this corrects effects on the div but lacks transition
}, 3000);
});
The CSS used includes Bootstrap as well as another 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;
}
No errors are reported, but the transition fails and jumps to final location. It appears to affect everything in the template rather than just the desired target. Checking the div's width before the timer fires returns null, while checking within the timed function returns the proper pixel width.
In need of assistance, any thoughts?
Thank you.
UPDATE: Attempted deferring the function after the template renders. This remedies the null problem but does not prevent the tween from affecting all elements in the yield.
Template.mainInit.rendered = function() {
console.log($("#teaContainer").width());
TweenLite.to($("#teaContainer"), 1, {css:{"margin":"25% auto auto auto"}, ease:Linear.none});
}