Jump to content
Search Community

TweenLite.to -- cannot animate top and left props

vsiege 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 am having trouble understanding why my DIV with the ID of 'tiny' will not animate or move when I press on the link. I was hoping to use TweenLite.ti just as I use in AS3. What is working correctly is the background color tween. It's possible I'm missing something. Heres my code:

 

<!DOCTYPE html>
<html>
<head>
   <title>Tweening</title>
   <link type="text/css" href="exts_css/objects2Move.css" rel="stylesheet" />
   <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/plugins/CSSPlugin.min.js"></script>
   <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/easing/EasePack.min.js"></script>
   <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/TweenLite.min.js"></script>

   <script>
    function hello() {
	    var r = document.getElementById("tiny");
	    TweenLite.to(r, 1, {css:{top:"200px", left:"450px", backgroundColor:"#FF0000"}, ease:Power2.easeOut});
    }
   </script>
</head>
<body>
<div id="tiny">
   help
</div>
<a href="#" onclick="hello()">Press me</a>
</body>
</html>

 

My CSS stylesheet:


@charset "UTF-8";
#tiny {
   position: absolute;
   background: orange;
   width: 200px;
   height: 200px;
   border: 1px solid;
}

Link to comment
Share on other sites

Thank you for your response. Your demo works perfectly. First try.

I see three differences between your demo and mine:

 

1. The directory structure on mine is different:

<script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/TweenLite.min.js"></script>

Can the GreenSock .js files only be located at 'js/*'?

 

2. I am also missing the

<meta charset="utf-8">

in my HTML document.

 

3. I am using an external stylesheet.

Link to comment
Share on other sites

1) No, you can put your JavaScript files wherever you want. I just put the files into a "js" folder for convenience.

 

2) Yeah, that's just a good practice. Otherwise, some browsers complain. It shouldn't mess up the scripting at all though.

 

3) You're welcome to use an external style sheet - that makes no difference whatsoever.

Link to comment
Share on other sites

3) You're welcome to use an external style sheet - that makes no difference whatsoever.

 

If I swap out the call for the external stylesheet and set the styles inside the html container, it all works. Thats the only thing that I did differently. I will post the files below for your review as I can't seem to use a stylesheet and there must be something else I'm missing.

 

Unfortunately it wont let me upload the library..... but I think you should have a copy laying around somewhere ;)

exts_css.zip

index.html

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