Jump to content
GreenSock

sorciereus

GSAP not working at all?

Go to solution Solved by GreenSock,

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

Hi there. I'm working on developing a demo to present to my company tomorrow on the wonders of GSAP. However, for some reason, on my company network, my ads aren't displaying. Here is an old ad that i made that I made as a demo that I know worked before, yet is showing as blank.

 

http://simplisticallycomplicated.biz/portfolio/2013/01/09/dsg-ad-created-with-html5-animation/

 

Here is my new code that I'm working on, super simple, yet the tweenlite calls aren't being made. You can see I'm linking to the JS files, locally, even.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#adcontainer
{
	width:300px;
	height:250px;
	overflow:hidden;
	border:1px solid #A7A7A2;
	background-image:url(../images/background.jpg);
}

#gearup
{
	font-family: Anderson 1938, Verdana, Geneva, sans-serif;
	font-size:56px;
	text-align:center;
	color:#fff;
	opacity:0;
	
}

</style>
<title>Snowsports HTML5</title>
</head>

<body>
<div id="adcontainer">
	<div id="gearup">GEAR UP</div>

</div>

<!--- The following scripts are necessary to do TweenLite tweens on CSS properties -->
<script src="/js/CSSPlugin.min.js"></script>
<script src="/js/EasePack.min.js"></script>
<script src="/js/TweenLite.min.js"></script>

<script>
window.onload = function(){
	TweenLite.to("gearup", 1, {alpha:1});	 
}
</script>
</body>
</html>
Link to comment
Share on other sites

Hi sorciereus :)

 

try this :

TweenLite.to("#gearup", 1, {alpha:1});	
  • Like 2
Link to comment
Share on other sites

Unfortunately that had no effect. Can anyone else view the ad in the demo link I sent? 

Link to comment
Share on other sites

  • Solution

Yep, it looks like you just forgot to add the "#" to indicate an ID in your selector text. Very old versions of GSAP allowed that (although we never recommended it), but now that we added querySelectorAll() support (which gives you a LOT more options for selector text without having to load a selector engine like jQuery, saving you kb), it's just not feasible to accommodate that. Trust me: it's a very good upgrade, and well worth the tradeoff for the few people who omitted the "#" previously. 

 

In summary, just add the "#" and you'll be golden :)

  • Like 1
Link to comment
Share on other sites

Rock n Roll! 

 

I guess I'll have to update the version in my portfolio w the selector! Thanks! 

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