Jump to content
GreenSock

cerulean

Basic Tweening Issue -- alpha, autoAlpha

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 am having some basic trouble getting a div within a div to alpha tween on and off.  Basically I'm trying to randomly change the text inside the div (it will be using a pictorial font so the image will change). The text changes, thus the timelineMax is working, but there is no tweening on and off -- no alpha tweening.    I'll include the relevant js and css below -- if the full zip is needed, can do, but I'm sure it's something really simple I'm missing.  I also noticed that storing the div in a 'global' variable -- grabbing it at the start with jquery -- wasn't working for whatever reason, and that's why I'm grabbing it each function.  Thanks for pointing the errors of my ways.

 

JS


startRotateDiv();

function startRotateDiv() {

	var rotateDiv  = $('#home_div div.content_image');	

	

	var tl  = new TimelineMax({repeat:-1});
	tl.add(setText);
	tl.to(rotateDiv,.5,{autoAlpha:1});
	tl.to(rotateDiv,.5,{autoAlpha:0},"+=2");
	tl.play();
}

function makeid(len)
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < len; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

function setText() {
		var rotateDiv  = $('#home_div div.content_image');	
	var txt = makeid(1);
	rotateDiv.html('<div class="notice">'+ txt + '</div>');
}

CSS



.notice {
	font-size: 80px;
	font-family: 'noticenotice2';
	color: red;
	background: url('http://media.npr.org/assets/news/2010/04/11/panda-f8a7c9331bbac776e52b26feeccc53de959f46d1-s6-c30.jpg');
}
Link to comment
Share on other sites

Hi,

 

The code you're providing works with a regular font, so the issue could be in the font-face rule.

 

Perhaps you should double check that. The rule is best constructed like this:

@font-face
{
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

I suggest you use this free service to generate the font package, they also include a sample css in the download:

 

http://www.fontsquirrel.com/tools/webfont-generator

 

Best,

Rodrigo.

Link to comment
Share on other sites

You could try setting up your font in this:

See the Pen zLgxK by jamiejefferson (@jamiejefferson) on CodePen

and seeing if it works. (I also set it up with a global rotateDiv and it's still working ok)

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.
×