Jump to content
GreenSock

cpshop

How i can creat funtion return TweenMax ?

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

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]
  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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