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

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


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 ;)



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