Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
spartan89

How to stagger staggered animations? stagger inside stagger

Go to solution Solved by Carl,

Recommended Posts

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

Link to post
Share on other sites

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! :)

  • Like 1
Link to post
Share on other sites

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.

  • Like 3
Link to post
Share on other sites

 

 

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   :-P 

 

I'm not sure if it's possible 

Link to post
Share on other sites

 

 

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

Link to post
Share on other sites

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.

 

:)

  • Like 2
Link to post
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.

×