How i can creat funtion return TweenMax ?

[cpshop 1 Likes (Newbie)]

Exp:
$(document).ready(function(e) {
        var colors = ["red", "blue", "green", "purple", "pink", "yellow", "orange"];
        tl = new TweenMax({delay:0.5});
        tl.staggerTo(".box", 1, {
        cycle : {
            y : [75, 0, -75],
            backgroundColor : function (i) {
                return colors[Math.floor(Math.random() * colors.length)];
            }
        },
        ease : Power2.easeInOut
    }, 0.05);    
    
    $("#return").click(function(){
            tl.restart();
        })
        
    });

 

But i see browser err(tl.staggerTo is not a function).Please help me

[joe_midi 238 Likes (Specialist)]

See the Pen GqZEoe by joemidi (@joemidi) on CodePen

 

I'm pretty sure .staggerTo() is apart of the TimelineLite/TimelineMax function, so just change 

 tl = new TweenMax({delay:0.5});

to

 var tl = new TimelineMax({delay:0.5});

CodePen at the top!

[Carl 9,066 Likes (Superhero)]

Yup, Joe is right. For what you want to do use TimelineLite or TimelineMax's staggerTo() methods. This way all the animations are added to a timeline which can be played, paused, reversed etc.

 

TweenMax does have a staggerTo() method but it creates an Array of tweens. In other words...

var tweens = TweenMax.staggerTo(".boxes", 1 {x:100});

console.log(tweens); 

//will look like

[tween1, tween2, tween3, tween4]

[cpshop 1 Likes (Newbie)]

It mean i use TweenMax for Exp:

var colors = ["red", "blue", "green", "purple", "pink", "yellow", "orange"],
            tl = TweenMax.staggerTo(".box", 1, {
        cycle : {
            y : [75, 0, -75],
            backgroundColor : function (i) {
                return colors[Math.floor(Math.random() * colors.length)];
            }
        },
        ease : Power2.easeInOut
    }, 0.05);

Is it ok. And i want creat button id="return" when i click it will repeat TweenMax

[Carl 9,066 Likes (Superhero)]

I think there is a slight language barrier. In order to restart a staggered animation you will need use a timeline like this:

 

var tl = new TimelineLite();


tl.staggerFrom(".box", 1, {scale:0, x:100, opacity:0}, 0.2)


document.getElementById("restart").onclick = function() {
  tl.restart();
}

 

http://codepen.io/GreenSock/pen/gMrKpX?editors=0010

 

TimelineLite is included in TweenMax. So if you were planning on using TweenMax there is no extra file size... just extra features

 

when you do

tl = TweenMax.staggerTo(...)

you are creating a bunch of tweens that are in an Array. tl is an Array. tl can not be restarted or paused or controlled. TimelineLite is best.

[cpshop 1 Likes (Newbie)]

I just investigated GreenSock so don't understand much. Thank you for the help. I'm thinking how to create a box of random images on slideUp. But don't know what to do