GSAP staggerFrom 负延迟

Question

Question:

I am wondering if there is a way to add a negative delay to the staggerFrom / staggerTo functions in greensock?

Problem:

I have animation is running too long for my liking. It would be great if my staggered animations could happen as the previous animations are playing to cut down the duration.

Example:

I have put together this codepen to illustrate what I am after: http://codepen.io/nickspiel/pen/LpepvQ?editors=001

You can see in the codepen that I have used negative delays on the basic from timeline functions but this doesn't work for the staggerForm function as the delay parameter is used to delay each element of the jquery collection.

Answer 1

Have you tried to use the new cycle property introduced in the latest v1.18.0 of GSAP?

So you can cycle with delay but passing 0 as stagger value in the staggerTo calls.

Also, you can pass position parameter to staggerTo calls to make them overlap with the previously inserted tween.

Here is the forked pen for an idea.

JavaScript:

...
animateElement = function() {
        timeline.from(main, 0.3, { scaleY: '0%', ease: Back.easeOut.config(1.7) })
        .staggerFrom(dataBlocks, 0.3, { cycle: { delay: function(index) {
            return index * 0.1;
        }}, scale: '0%', y: 100, ease: Back.easeOut.config(1.7) }, 0)
        .from(lineGraphLines, 1.5, { drawSVG: 0, ease: Power1.easeOut }, '-=0.5')
        .from(lineGraphAreas, 1, { opacity: 0, ease: Back.easeOut.config(1.7) }, '-=2.0')
        .staggerFrom(lineGraphDots, 0.2, { cycle: { delay: function(index) {
            return index * 0.1;
        }}, scale: 0, ease: Back.easeOut.config(1.7) }, 0, '-=1.0')
        .staggerFrom(donutCharts, 0.6, { cycle: { delay: function(index) {
            return index * 0.1;
        }}, drawSVG: 0, ease: Power1.easeOut }, 0, '-=2.0')
        .from(menuBackground, 0.3, { scaleX: '0%', ease: Back.easeOut.config(1.7) }, '-=6')
        .staggerFrom(menuElements, 0.3, { cycle: { delay: function(index) {
            return index * 0.1;
        }}, scaleX: '0%', ease: Back.easeOut.config(1.7) }, 0, '-=1')
        .from(headerBackground, 0.5, { scaleX: '0%', ease: Power1.easeOut }, '-=5.5')
        .staggerFrom(headerBoxes, 0.3, { cycle: { delay: function(index) {
            return index * 0.1;
        }}, scale: '0%', ease: Back.easeOut.config(1.7) }, 0, '-=1.0')
        .staggerFrom(headerText, 0.4, { cycle: { delay: function(index) {
            return index * 0.1;
        }}, scaleX: '0%', ease: Back.easeOut.config(1.7) }, 0, '-=1.0')
        .from(headerText, 0.4, { scaleX: '0%', ease: Back.easeOut.config(1.7) }, '-=4');
    };
...

This may not be exactly the type of animation you wanted but you'll need to adjust the position parameter in most/all of your tweens as per your liking but I think the main take away for you would be the use of cycle with delay .

Hope this helps in some way.

PS You can pass negative stagger values but they have a different meaning. It tells the engine to start the staggered animation from the last element.

Answer 2

I asked this same question on the Greensock GitHub repo and had the following response:

Absolutely - that's already baked in. I'm not sure if you're using TweenMax or one of the timeline classes, so I'll show you both:

TweenMax.staggerTo(elements, 1, {x:100, delay:2}, 0.01);

// - OR -

var tl = new TimelineLite();
tl.staggerTo(elements, 1, {x:100, delay:2}, 0.01);

// - OR -

var tl = new TimelineLite(); 
tl.staggerTo(elements, 1, {x:100}, 0.01, "label+=3");

In my case the last option worked flawlessly.