Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Tween Opacity of Text

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.





Link to comment
Share on other sites



function init()



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


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








<style type="text/css">





position: absolute;

width: 502px;

height: 434px;

margin-top: 140px;

margin-left: 284px;
















<body onLoad="init()">


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

Link to comment
Share on other sites



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




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



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

Not exactly sure what would be causing that.

Feel free to attach a simple zip file that contains just enough html, css and js to illustrate the alpha tween not working when it is part of a TimelineMax. I'm sure we can figure it out.

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.