Can you tween with only TweenLite?

[victor hugo]

I'm trying to create a tween.  I was looking at the tutorials here : 

http://forums.greensock.com/topic/6095-example-html-banner-using-greensock-js-beta/

 

And they all involve TweenLite, TimeLineLite, CSSPlugins, and EasePack.

 

Is it possible to create Tweens with just TweenLite?

 

Here is the code I wrote and it doesn't work.

 

<style type="text/css"> 

#content {

    background-color:#FFFFFF;

    width:300px;

    height:30px;

    padding:3px;

    border-style:solid;

    border-width:medium;

}

</style>

<script type="text/javascript" src="http://img-cdn.mediaplex.com/0/20225/150045/TweenLite.min.js"></script>

<div id="content">My Account</div>

<script type="text/javascript">

var content1 = document.getElementById("content");

TweenLite.to(content1, 1.5, {width:200, height:200});

</script>

</div>

 

Thank You

[Carl]

Hi,

 

The technical answer is yes, you can animate with only TweenLite put it really depends on what you want to animate.

 

For instance, if I had a game object that had a score property. I could tween the score value with only TweenLite

var game = {score:0});
TweenLite.to(game, 1, {score:100});

If I wanted to tween the width of an <img> I could do that with only TweenLite because img elements have a width property.

 

See the Pen 8752dd8c88d865f5c02d403bdfd85845 by GreenSock (@GreenSock) on CodePen.

 

 

 

In your example you are trying to change the width of a div element. To do that you need the CSSPlugin. The reason being that divs do not have a width property, but their width can be changed via css. 

 

When doing animations on DOM elements 99.9% of the time you will need to use the CSSPlugin. As long as the CSSPlugin is loaded you can do things like

 

html

<div id="logo"></div>

js

var logo = document.getElementById("logo");
TweenLite.to(logo, 2, {left:"542px",
                       backgroundColor:"black",
                       borderBottomColor:"#90e500",
                       color:"white"});

left, backgroundColor, borderBottomColor, color are all properties that the CSSPlugin can adjust.

 

If you haven't already, go through the Jump Start:

http://www.greensock.com/jump-start-js/#welcome (view the demos on codepen too)

 

and read the Getting Started tutorial

http://www.greensock.com/get-started-js/

 

 

There's a ton of great info in the CSSPlugin docs too:http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

Hopefully this gets you on the right path. If you have any more questions, don't hesitate to ask.

[victor hugo]

It looks like I made three mistakes.

 

1 ) Not using the CSS Plugin

2 ) Not putting my values in quotes

3 ) Not putting px after the value.

 

It should have been :

TweenLite.to(content1, 1.5, {css:{width:"100px", height:"100px",x:"100px", y:"100px"}});

 

 

Thanks for the help.

[GreenSock]

#1 was a problem, yes, but #2 and #3 aren't necessarily. We've built CSSPlugin to automatically assume you meant "px" if you just pass in a number. And you don't need to wrap things in css:{} anymore, although that's perfectly fine to do. So these two lines will get you the same results. 

//longer:
TweenLite.to(content1, 1.5, {css:{width:"100px", height:"100px",x:"100px", y:"100px"}});

//shorter:
TweenLite.to(content1, 1.5, {width:100, height:100, x:100, y:100});

(this assumes you're using a relatively recent version of GSAP)