Code does not work !

rostamiani · March 28, 2014

Hi

I tried to use TweenLite to animate some elements, but it didn't work !

The console.log command works, no errors occures, but nothing happens too.

This is the whole page :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ایشکاب</title>
<script src="js/greensock/TweenLite.min.js"></script>
<script type="application/javascript">
	window.onload = function(){
		var back = document.getElementById("back");
		var table = document.getElementById("table");
		
		console.log(table);
		//TweenLite.to(table,4,{top:"4500px" , height:"0px"});
		TweenLite.to(table,4,{top:"4500"});
		TweenLite.to(back, 1.5, {width:100});
	};
</script>
<style>
	body,html {
		padding: 0px;
		margin: 0px;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	#cont {
		position: relative;
		margin: 0px auto;
		width: 960px;
		height: 100%;
		overflow: hidden;
	}
	#back {
		position: absolute;
		background-image: url("images/back.jpg");
		width: 960px;
		height: 1484px;
	}
	#table {
		position: absolute;
		background-image: url("images/table.png");
		width: 521px;
		height: 1171px;
		left: 0px;
		top: 20%;
	}
	#menu {
		position: fixed;
		right: 10px;
		bottom: 10px;
		width: 300px;
		height: 150px;
		background-color: red;
	}
	
</style>
</head>

<body>
<div id="cont">
<div id="back"></div>
<div id="table"></div>
<div id="menu"></div>
</div>
</body>
</html>

Jonathan · March 28, 2014

Hello rostamiani, and Welcome to the GreenSock Forums!

There reason why your code is not working is:

Are you using the latest version of GSAP?
And since you are using TweenLite.min.js .. you need to also include the CSSPlugin if you want to animate CSS properties like top and left.

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/CSSPlugin.min.js"></script>

If you include TweenMax .. which includes TweenLite, TimelineMax, TimelineLite, CSSPlugin, and other goodies .. so you won't have to worry about including other scripts.. have it all in one for convenience:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script>

Here is your code running on codepen:

See the Pen aHsuq by jonathan (@jonathan) on CodePen

I'm not exactly sure what is supposed to be happening. You can fork (copy) my codepen example and test with it.

Video Instructions by GreenSock on How to create a codepen demo example.

Keep in mind i just used bg colors instead of the images since i dont have access to the images you used in your code above.

Does that help?

Notifications

Messages

Code does not work !

Warning: Please note

Recommended Posts

rostamiani

Link to comment

Share on other sites

Jonathan

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members