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!