Jump to content
Search Community

Stagger with step

ninmorfeo test
Moderator Tag

Recommended Posts

hi every one!

is there a way to run the stagger not with step of 1 but step of N?

I'll explain: currently if I have 10 elements to which I have modified the final value of the X position of 20 pixels through a function that returns me +20 and -20, the stagger method animates the elements according to this scheme:

ele [0] = +20

ele [1] = -20

ele [2] = +20

ele [3] = -20

ele [4] = +20

ele [5] = -20

ele [6] = +20

ele [7] = -20

ele [8] = +20

ele [9] = -20

how can I do this type of animation instead?

ele [0] = +20

ele [5] = -20

ele [1] = +20

ele [6] = -20

ele [2] = +20

ele [7] = -20

ele [3] = +20

ele [8] = -20

ele [4] = +20

ele [9] = -20

in practice there is a way to define a step on the animation objects? not more every 1 but every 5...

 

   gsap.to(chi, {
                duration: .3,              
                stagger: {
                    amount: 2,  
                    },
                x: gsap.utils.wrap(["+=20", "-=20"]),
   })

 

Link to comment
Share on other sites

Hey ninmorfeo.

 

There's no built in way to skip elements like that in a stagger. But you can easily sort the array however you want to and animate it after you sort the array. That's exactly what themepunch did in this thread:

 

For example if you want to stagger the elements as you show above:

See the Pen PoqYWGp?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

Just now, ninmorfeo said:

it can be a idea for next releases 😜

It was an idea for the previous release, 3.1, that didn't make it. As discussed in the linked thread, there are infinite variations possible using GSAP's staggers and we can't build in support for all of them. So we cover what we believe are the most common use cases and leave out the rest in order to save on file size.

 

As shown in this thread and the one linked to, it's quite easy to get other stagger orders by doing the sorting yourself.

  • Like 1
Link to comment
Share on other sites

I may be misunderstanding your goal, but couldn't you just use a function-based value and use whatever logic you want? Like this:

See the Pen xxGxejO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

gsap.to("box", {
  duration: 0.3,              
  stagger: {
    amount: 2
  },
  y: (i, target, targets) => i < targets.length / 2 ? 20 : -20
});

Is that the effect you were looking for or did I misunderstand?

Link to comment
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.
×
×
  • Create New...