ninmorfeo Posted February 4, 2020 Share Posted February 4, 2020 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 More sharing options...
ZachSaucier Posted February 4, 2020 Share Posted February 4, 2020 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 2 Link to comment Share on other sites More sharing options...
ninmorfeo Posted February 4, 2020 Author Share Posted February 4, 2020 thanks a lot! but it can be a idea for next releases 😜 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 4, 2020 Share Posted February 4, 2020 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted February 7, 2020 Share Posted February 7, 2020 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 More sharing options...
ninmorfeo Posted February 7, 2020 Author Share Posted February 7, 2020 no jack, the first example was correct...anyway i found solution by reorder object array. thanks anyway 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now