# Introduction

## Introduction

![](/files/-M40zesUkvRXIIh7BB1d)

[TweenMax](https://greensock.com/tweenmax\)%20extends%20TweenLite,%20adding%20many%20useful%20\(but%20non-essential\)%20features%20like%20repeat\(\),%20repeatDelay\(\),%20yoyo\(\),%20updateTo\(/), and more. TweenMax was built for convenience, providing a single JavaScript file that contains everything you will commonly need for **animating DOM elements**.

Like TweenLite, a TweenMax instance handles tweening one or more properties of any object (or array of objects) over time. TweenMax can be used on its own or in conjunction with **advanced sequencing tools like TimelineLite or TimelineMax** to make complex tasks much simpler.

## Examples

* [Music App Study (Codepen)](http://codepen.io/jinnrw/pen/ggpgVe?editors=0110) -  The examples in this article.
* [GreenSock - Scale Box on Hover](http://codepen.io/ihatetomatoes/pen/qdgNdL)

## Resources

* [GreenSock Cheat Sheet (useful)](https://ihatetomatoes.net/wp-content/uploads/2016/07/GreenSock-Cheatsheet-4.pdf)
* [Getting Started with GSAP](https://greensock.com/get-started-js)
* [Jump Start: GSAP JS](https://greensock.com/jump-start-js)
* [Using the TweenMax.js in Tizen](https://developer.tizen.org/community/tip-tech/using-tweenmax.js-gsap-greensock-animation-platform-tizen)
* [TweenMax Doc](https://greensock.com/docs/#/HTML5/GSAP/TweenMax/)

## Subjects

### Syntax

```
TweenMax.to( target:Object, duration:Number, vars:Object )
```

![](/files/-M40zesXndHaR-29AvX3)

You can also define in CSS properties:

```
TweenMax.to($('.line'), 0.5, {css: { scaleY: 1, transformOrigin: "center center" }, ease: Expo.easeOut})
```

### Methods

The most common type of tween is a [TweenMax.to()](https://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/) tween which allows you to define the destination values. Think in this way, your existing CSS styles is the starting point and be tweened **to** whatever you defined in TweenMax.

Other commonly used methods:

* [TweenMax.from()](https://greensock.com/docs/#/HTML5/GSAP/TweenMax/from/) allows you to tween **from** whatever you defined in TweenMax to the existing CSS styles.
* [TweenMax.fromTo()](https://greensock.com/docs/#/HTML5/GSAP/TweenMax/fromTo/) allows you to define both the starting and ending values. 
* [TweenMax.staggerFrom()](https://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/) allows you to stagger their start times by a specified amount of time, creating an **evenly-spaced sequence** with a surprisingly small amount of code.

### Use Timeline Tools to Create Chain Animation

There are two sequencing tools [TimelineLite](https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/) and [TimelineMax](https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/). TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo and more.

It is the ultimate sequencing tool that **acts like a container for tweens** and other timelines, making it simple to control them as a whole and precisely manage their timing.

Without TimelineMax, building complex sequences would be far more cumbersome because you'd need to use the delay special property for every tween which would make future edits far more tedious.

Example:

![](/files/-M40zes_7CNx1hRe3V1u)

### Use with jQuery

The selector engine (like jQuery) that should be used when a tween receives a string as its target, like

```
TweenLite.to("#myID", 1, {x:"100px"}) 
```

By default, TweenLite will look for window.$ and then window\.jQuery and if neither is found, it will default to document.getElementById() (in which case it will also strip out any leading "#" in any IDs it receives). Feel free to use any selector you want: **jQuery**, Zepto, Sizzle, or your own.

Examples for using TweenMax with jQuery methods:

* Hover Event

  ```
  $('.track_info').hover(
    function(){
        TweenMax.fromTo($(this), 0.5, {opacity: 0.5, ease: Power2.easeInOut},           
                        {opacity: 1})},
    function(){
        $(this).css("opacity", "1");
  });
  ```
* Click Event

  ```
  $('.dim').click(function() {
    TweenMax.to(".dim", 0.5, {opacity: 0, display: 'none', ease: Power2.easeInOut});
    TweenMax.to("#player", 0.5, {xPercent: 100, display: 'none', ease: Expo.easeOut});
    TweenMax.to(".nav", 0.5, {xPercent: -100, display: 'none', ease: Power2.easeInOut})
    TweenMax.to(".mini-player", 0.5, {x: 0, ease: Expo.easeOut});
  });
  ```

### Ease/ Curve

Greensock offers an intuitive [Ease Visualizer](https://greensock.com/ease-visualizer) for us to fine-tune the animation. Ease is a very interesting parameter because it tells the TweenMax animation engine how to interpolate the change of the chosen value during the given time. There are lots of predefined functions to choose from.

If you don't define any easing in your tween, the [default ease](https://greensock.com/forums/topic/11657-default-ease/) is Power1.easeOut.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jinn-wang.gitbook.io/tweenmax-animation/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.