Jump to content

victor hugo

Can you tween with only TweenLite?

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'm trying to create a tween.  I was looking at the tutorials here : 


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 {









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




Thank You
Link to comment
Share on other sites



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



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


var logo = document.getElementById("logo");
TweenLite.to(logo, 2, {left:"542px",

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




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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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

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

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

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.