How to stagger staggered animations? stagger inside stagger

[spartan89]

Hi,

 

First I want to say I'm really happy that I'm using GSAP! it's wonderful ..

 

Please check out my Pen ... 

Here we have 3 sets of elemnts and I want to stagger the 3 of them with a stagger time of sy 0.1s and simultaneously stagger the elemnts inside them ..  right now the elements of the second block wont start their animation until the last elemnt of the previous block animates ...

so basically I want to stagger 3 blocks of staggering elements, I don't want one block to wait until the previous one is done.

and I have to start the whole function with     $(".fade-scroll").each( ...  so please don't suggest to change that

also I dont want to use setTimeout function

somehow by getting ".quick-info-item" and ... would be great

I'll appreciate it very much if anyone could help me..

See the Pen ALBpkX by ershad989 (@ershad989) on CodePen

[Jonathan]

Hello spartan89, and welcome to the GreenSock forum!

 

It looks like since you are sequencing your tweens after each() loop. Then you should take advantage of using the position parameter, so can have each tween run in sequence but with offsets like.

 

The position parameter is the last parameter in the staggerFrom()

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerFrom/

.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* )

staggerFrom() parameters:

1. targets:Array
2. duration:Number
3. vars:Object
4. stagger:Number
5. position:*
6. onCompleteAll:Function
7. onCompleteAllParams:Array
8. onCompleteScope:*

Understanding the position parameter is key to mastering TimelineMax and TimelineLIte.

 

 

Also this can help you with sequencing your tweens with TweenMax and TimelineMax

 

 

Let us know if that helps!

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. You were very close. I think this is the behavior you are after:

 

function fade_scroll_animation() {
        var $anim_scroll = $(".quick-info-item"),
            anim_time = .5,
            anim_stagger = 0.2,
            initial_delay = 2,
            easing =  Power2.easeInOut,
            elem_y = 40;
        var tl = new TimelineLite();
        $anim_scroll.each(function(index, element) {
            var $this = $(this),
                $anim = $this.find(".anim-el");
               
            //this animates each .anim-el in each .quick-info-item
            //this stagger gets create 3 times and added to the tl which is created outside the each() loop
            tl.staggerFrom($anim, anim_time, { y: elem_y, opacity: 0, ease: easing}, anim_stagger, index * 0.2);




        });


    }

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

 

The trick is that I changed what $anim_scroll selects to $(".quick-info-item")

.quick-info-item is the container for each group of 3 anim-el things. 

 

So basically for each .quick-info-item we now grab each anim-el inside of it and do a stagger.

We then start the stagger on the next group of anim-el items before the previous one ends.

[spartan89]

 

 

So basically for each .quick-info-item we now grab each anim-el inside of it and do a stagger.

We then start the stagger on the next group of anim-el items before the previous one ends.

 

Thank you I exactly want to have that effect but I didn't mention this, I am using ScrollMagic as well and I need to have this effect for a couple of groups of these quick-info-items, it is a scroll animation that occurs on scroll, I dont want to write a code for every one of these groups ..

 

so here is my actual code:

 

 

    function fade_scroll_animation() {
        var $anim_scroll = $(".fade-scroll"),
            $anim_text_g = $(".anim-text"),
            anim_time = .7,
            anim_stagger = 0.1,
            initial_delay = 0.1,
            easing = Power2.easeInOut,
            elem_from_top = false,
            elem_y = "40";

        $anim_scroll.each(function() {
            var $this = $(this),
                $anim = $this.find(".anim-text");

            var tl = new TimelineMax();
            tl.staggerFrom($anim, anim_time, { y: elem_y, opacity: 0, ease: easing, delay: initial_delay }, anim_stagger);


            scene = new ScrollMagic.Scene({
                    triggerElement: this,
                    // triggerHook: "onEnter",
                })
                .setTween(tl)
                .addIndicators()
                .addTo(scrollMagicController)
                .reverse(true);
        });

    }

    fade_scroll_animation();

I have to start the function with this : $anim_scroll.each(function() { ... )}

then I have to write a Tween for it which somehow gets an array of items inside .quick-info-item and the staggers them while staggering the .quick-info-item elemnts themselves    

 

I'm not sure if it's possible 

[spartan89]

 

 

Let us know if that helps!

 

Jonathan Thank you I know how positioning works but I dont know how is it going to help me achive that effect .. I think my problem is that I don't know how to get my target elemnts

[Jonathan]

The reason that would help is because you have the stagger which will offset the timing of each stagger since your using the stagger method. Then by using the position parameter you offset the timing of when each tween runs offsetting when each group gets animated in. That is why the position parameter will work! That is why you notice in Carl's example he uses

 

index * 0

 

which is so each tween gets a sort of stagger for each tween.

 

- stagger:number offsets each element in the staggerFrom() tween

 

- position:number offsets each tween

 

big difference between the two and why that would help you.

 

Carl shows this technique in his example above.