Introduction

Introduction

TweenMax, 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) - The examples in this article.

• GreenSock - Scale Box on Hover

Resources

• GreenSock Cheat Sheet (useful)

• Getting Started with GSAP

• Jump Start: GSAP JS

• Using the TweenMax.js in Tizen

• TweenMax Doc

Subjects

Syntax

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

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() 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() allows you to tween from whatever you defined in TweenMax to the existing CSS styles.

• TweenMax.fromTo() allows you to define both the starting and ending values.

• 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 and 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:

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 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 is Power1.easeOut.