Jump to content
Search Community

Tween Opacity of Text

jeff4gee test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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>

Link to comment
Share on other sites

Hi and Welcome to the GreenSock forums.

 

Your code actually looks pretty good. Didn't notice any errors.

We can help you much better if you could attach a zip of any html/css/js necessary to recreate the problem (you don't need to include the greensock lib). It doesn't have to be any more than a single tween that isn't working. No need for all the additional timeline code if that is working fine.

 

 

Is the problem happening on all browsers?

 

We will be sure to look at your example and let you know what we find.

 

Best,

 

Carl

Link to comment
Share on other sites

<script>

 

function init()

{

 

var mainInfo = document.getElementById("mainInfo");

 

TweenLite.to(mainInfo, 1, {css:{alpha:0}});​

 

}

 

 

</script>

 

 

<style type="text/css">

 

#mainInfo

{

 

position: absolute;

width: 502px;

height: 434px;

margin-top: 140px;

margin-left: 284px;

font-family:Times;

font-size:14px;

text-align:justify;

display:block;

}

 

</style>

 

 

 

 

 

 

</head>

 

<body onLoad="init()">

 

<div id="mainInfo">My Text goes here</div>

Link to comment
Share on other sites

ok.

 

So I went ahead and created a jsfiddle out of your code.

 

http://jsfiddle.net/geekambassador/jFTJv/

 

It runs great. Don't really know what the problem could be.

 

I only modified the size and the position of the text.

Tested in FF, Chrome and Safari.

 

If you are not seeing the text fade out in the example linked above, please provide full details on your brower and operating system

 

-c

Link to comment
Share on other sites

This worked great. I went back to my code and did some investigating. I found that if I called out to a function from the timelineMax that just contained the one Tween for the text it would work in animating; however when I placed the tween into the TimelineMax sequence it failed to run that line. Any thoughts on that?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...