Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

TweenLite

Sign in to follow this  

| GreenSock
899979

Note: TweenLite has been deprecated in GSAP 3 (but GSAP 3 is still compatible with TweenLite). We highly recommend using the gsap object instead. While GSAP 3 is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

TweenLite is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP). A TweenLite instance handles tweening one or more properties of any object (or array of objects) over time. TweenLite can be used on its own to accomplish most animation chores with minimal file size or it can be used in conjunction with advanced sequencing tools like TimelineLite or TimelineMax to make complex tasks much simpler.

Basic Usage

The most basic use of TweenLite would be to tween a numeric property of a generic JavaScript object.

var demo = {score:0},
    scoreDisplay = document.getElementById("scoreDisplay");

//create a tween that changes the value of the score property of the demo object from 0 to 100 over the course of 20 seconds.
//each time the tween updates call the function showScore() which will handle displaying the value of demo.score.
var tween = TweenLite.to(demo, 20, {score:100, onUpdate:showScore})

function showScore() {
  scoreDisplay.innerHTML = demo.score.toFixed(2);
}
See the Pen TweenLite Tween Numeric Property by GreenSock (@GreenSock) on CodePen.

note: Click on the "Result" tab to see the value of score animate.

Animate CSS Properties

For most HTML5 projects you will probably want to animate DOM elements. No problem. Once you load CSSPlugin TweenLite can easily animate CSS properties of DOM elements.

/*external js
http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js
http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js
*/

window.onload = function() {
  var logo = document.getElementById("logo");
  TweenLite.to(logo, 2, {left:"542px", backgroundColor:"black", borderBottomColor:"#90e500", color:"white"});
}
See the Pen Animate Multiple Properties by GreenSock (@GreenSock) on CodePen.

note: Click on the "Result" tab to see the animation. TweenLite isn't limited to animating DOM elements, in fact it isn't tied to any rendering layer. It works great with canvas and WebGL too!

Control

TweenLite is packed with methods that give you precise control over every tween. Play, pause, reverse, and adjust the timeScale (speed) whenever you need to. The demo below shows the power of just a handful of TweenLite's methods.

See the Pen Control Playback by GreenSock (@GreenSock) on CodePen.

note: Click on the "JS" tab to see detailed comments about what each button does. To see more of TweenLite in action visit our Jump Start guide and extensive CodePen collections.

And so much more

TweenLite is loaded with even more features allowing you to:

  • kill tweens
  • find active tweens
  • specify how overwriting of tweens should be handled
  • get/set the time, duration and progress of a tween
  • delay tweens
  • pass arguments into event callback functions
  • specify values to tween from

The best place to get all the juicy details on what TweenLite can do is in the TimelineLite documentation. Need even more tweening power? Be sure to check out TweenLite's beefy big brother TweenMax.

cheat-sheet

Get an all-access pass to premium plugins, offers, and more!

Join the Club

When is the last time you worked on something you love? Go animate something cool and then share it with us.

- Team GreenSock
Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×