Adding delay

[cowfields]

Hi all,
 
I'm pretty new to GSAP so apologies if I've missed something obvious.
 
What I'm trying to achieve is the ability to change the delay on a staggerTo tween, as part of a timeline.
 

var embiggen = function(selector, delay) {

        
        var elements = $( selector );
        var t1 = new TimelineMax();
        t1.pause();
        t1.staggerTo( elements, .5, {scale: 2}, delay);

        return t1;
    }
    
    // create the animation with 0.25s delay between each one
    var squares = embiggen( '.square', 0.25 );

    // start when the app is ready
    squares.play();

    // What I would like to do is...
    squares.addDelay(1);

    squares.restart(); // this would play, but with a 1 second delay rather than 0.25s delay 

I have the above code in the codepen link.  There is an obvious bug where "addDelay" doesn't work. I appreciate I'd have to reference the staggerTo specific parts of the timeline but the gist is, let's say in some situations I want to unveil elements slowly, but then maybe later do the same unveil but all together, or faster or whatever.  It's a conceptual idea at this point.  I appreciate I could just run the "embiggen" function a second time, and then just reference the animation I needed - I am just wondering if there's a method for this rather than having two timelines saved in variables which could potentially take up more memory?

 

To clarify, it's not necessarily the speed of the whole thing I want to slow down, the timeline tweens themselves would be the same.  It's simply the delay between the squares, whether, say, they want to run all together, or staggered.

 

Thanks!

See the Pen BjYyYZ by cowfields (@cowfields) on CodePen

[Diaco]

Hi cowfields   

 

at first there isn't .addDelay() method in GSAP api , 

 

but if i understood correctly , you can use this function :

var tl = new TimelineMax()
    .staggerTo('.dots',1,{y:100},1);

var Tweens = tl.getChildren()[0].getChildren();

function StaggerGaps(STweens,amount){ // " STweens" are your staggers tweens and "amount" is the gap duration between tweens
    for(var i=0; i<STweens.length; i++){
        STweens[i].startTime(amount*i)
    }
};

StaggerGaps( Tweens , 0.2 ); // set 0.2 second gap 

 pls check this out : 

See the Pen 20c87274b18280c3a6c58dc29b299ef7 by MAW (@MAW) on CodePen

[Carl]

Great solution by Diaco. 

Basically what he is showing you is how you can find all the tweens and change their startTime(), with that technique you could also change their duration() too.

 

Not exactly sure what you need to do but also keep in mind that you can make a timeline play faster or slower by adjusting its timeScale().

tl.timeScale(2) // plays twice as fast as normal

I also want to point out that if you need a lot of flexibility there is nothing wrong with just generating a new timeline with new parameters. In the end it wlll be a whole lot easier than trying to find and adjust existing animations.

[cowfields]

That's great, thanks for the quick response guys

 

I think that'll solve my issue.