Jump to content
Search Community

TweenLite doesn't seem to do anything?

1DMF test

By 1DMF
in GSAP

Moderator Tag
 Share

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

1DMF test

1DMF

Posted
Posted

Hi,

 

I've just downloaded and added TweenLite to my page.

 

I tried to do a simple animation

var myobj = $('#middle');
TweenLite.to(myobj, 1, {top:0});

Nothing happens?

 

However, if I just use JQuery...

$('#middle').animate({top:0}, 1000);

It works fine and animates as desired?

 

I must be doing something really stupid, as I cannot get anything GSAP to work?

 

All help appreciated.

 

Craig.

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi Craig and welcome to the Greensock forums.

 

The code you're posting should work, so it'll be very helpful if you could provide a reduced sample using codepen or jsfiddle in order to take a look at the bigger picture.

 

In the mean time this is a basic snippet of how your code should be:

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title></title>

<style type="text/css">
#middle
{
	position: relative;
	width: 100px;
	height: 100px;
	background: green;
	top: 300px;
}	
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

</head>
<body>

<div id="middle"></div>

<script type="text/javascript">
$(function(){

var myobj = $('#middle');
TweenLite.to(myobj, 1, {top:0});

});
</script>

</body>
</html>

Keep in mind that in order to animate CSS properties like top and left the element should be positioned, whether is relative, absolute or fixed.

 

Rodrigo.

Link to comment
Share on other sites
1DMF test

1DMF

Posted
  • Author
Posted

Hi Rodrigo,

 

Thanks for the reply.

 

Using the two links you show (for JQuery and Tween), seem to work. But that is using TweenMax and I don't want Max, it's too slow at loading I want only Lite, is this type of animation not possible with Lite?

 

Thanks

Craig.

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Yep but you need to include the CSSPlugin. I believe that's the problem.

 

You should include TweenLite.js and CSSPlugin.js in your document's head tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>

Keep in mind that TweenLite.js is just the basic engine functions, but it doesn't include any of the plugins. I'll suggest you take a good look at the API reference in order to get a better idea of how things work.

 

Also here you can find all the engine's links:

 

http://cdnjs.com/libraries/gsap/

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites
  • 1 year later...

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...