I new to the GSJS and I am trying to tween the opacity of a div that as text in it. I have not been able to get the text to change with any css changes. Here is a sample of my code below. Could anyone tell me what I am doing wrong. Thanks.
function init()
{
var title = document.getElementById("logoTitle");
var logoBar = document.getElementById("logoBar");
var subTitle = document.getElementById("subTitle");
var logoNumber = document.getElementById("logoNumber");
var nav1 = document.getElementById("s1navOne");
var nav2 = document.getElementById("s1navTwo");
var nav3 = document.getElementById("s1navThree");
var nav4 = document.getElementById("s1navFour");
var nav5 = document.getElementById("s1navFive");
var mainInfo = document.getElementById("mainInfo");
var logoTL = new TimelineMax({delay:.4});
logoTL.from(logoBar, .5, {css:{transformOrigin:"bottom", scaleY:"10"}, ease:Sine.easeOut})
logoTL.from(title, .5, {css:{alpha:0, marginLeft:"-50px"}, ease:Back.easeOut}, -.3)
logoTL.from(subTitle, .5, {css:{alpha:0, left:"50px"}, ease:Back.easeOut}, -.3)
logoTL.from(logoNumber, .5, {css:{alpha:0, marginTop:"20px"}, ease:Back.easeOut}, -.3)
logoTL.from(nav1, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.3)
logoTL.from(nav2, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4)
logoTL.from(nav3, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4)
logoTL.from(nav4, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4)
logoTL.from(nav5, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4)
logoTL.to(mainInfo, 1, {css:{alpha:0}})
<div id="mainInfo">This is the text I have</div>