Jump to content
Search Community

Stagger "from" Alternatives

themepunch test
Moderator Tag

Recommended Posts

Hi Guys,

 

I just enjoying the brilliant possibilities of the new gsap 3.0.5 Library and wondering if there is a better way, or maybe a possibility to extend the stagger from option like shown in my example.  You have already start, end, center, edges which is nice. However i miss 3 interesting art ,  "random",  "center single" and "edges single". 

 

In the Example i made you can see that the original from stagger animates in pairs by center and edges option and not single.  Also a Random i was not able to find. So if you have a better, quicker solution than i done in the pen, or you maybe can integrate those options in the future please let me know ! 

 

Thanks again, and just amazing how lovely gsap works after update from 2.x to 3.x !! Great Work !

 

Cheers, Krisztian

See the Pen GRgdpde by themepunch (@themepunch) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey themepunch, and thanks for the suggestion! 

 

I really like your from ideas. However, we are in a constant struggle of trying to decide what is worth including in GSAP's core and what is not worth it. Extra effects like these are fun and can be quite helpful in some circumstances but we always have to weigh: is it worth the kilobyte size? To answer that, we try to guess how much people will user certain effects/features and how much file size it would add. Ultimately it's up to @GreenSock to make the final decision since he is the primary maintainer and owner of GreenSock. 

Link to comment
Share on other sites

I think I could add a from: "random" option to the next release without adding too much kb. In fact, I could even expose a new gsap.utils.shuffle() utility method that'd shuffle an array, because it's what I'd use internally anyway and I suspect folks might find that useful (it would shuffle an array that you feed in). What do you think? https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

Of course I welcome anyone's input. Do you think it's worth adding? 

 

As for the "edges/center single" stuff, I think that's too much of an edge case to build anything into the core for that, but it's relatively easy to get that functionality with a little helper function: 

// reusable function that you can wrap around your stagger vars and define an "offset" value that'll get added to the 2nd half of the values
function offsetStagger(vars) {
	let distributor = gsap.utils.distribute(vars);
	return function(i, target, targets) {
		return distributor(i, target, targets) + (i <= targets.length / 2 ? 0 : vars.offset || 0);
	}
}

so you'd use it like this: 

gsap.to("box", {
	duration: 1,
	y: 100,
	stagger: offsetStagger({ // <--
		each: 0.5,
		offset: 0.25,
		from: "edges"
	})
});

So that adds an extra 0.25 to the 2nd half of the elements in the array. Obviously you can define whatever value you want. It'd work the same with from: "center".

 

Does that help? 

  • Like 3
Link to comment
Share on other sites

Oh, and here's a helper function for getting randomized staggers in the current version of GSAP: 

 

// wrap this around your stagger vars object and it'll randomize the results.
function randomStagger(vars) {
	let distributor = gsap.utils.distribute(vars),
		values;
	return function(i, target, targets) {
		if (!values) {
			values = targets.map((target, index) => distributor(index, target, targets)).sort(() => .5 - Math.random());
		}
		return values[i];
	}
}

Usage: 

gsap.to("box", {
	duration:1,
	y:100,
	stagger: randomStagger({
		each: 0.5
	})
});

The main issue with the way you did the random stagger is that you had to shuffle the targets array going into the tween, but what if you had function-based values for other properties like x: i => i * 100? That'd mess up the positioning of things because all the targets are shuffled. See what I mean? The solution above won't mess with your targets array at all. 

  • Like 2
Link to comment
Share on other sites

Amazing ! Thank you for the Answer !  Whatever direction you will go it will be good.

 

I can understand the idea behind keeping things simple, and i guess the utils.shuffle would maybe the better way on long term since it has more effect with same amount of  code at the end on the library side  instead of only extending the "from" in stagger. 

 

Just like always, awesome Answer awesome solution !  Have a great weekend guys ! 

 

  • Like 2
Link to comment
Share on other sites

On 1/11/2020 at 5:33 PM, GreenSock said:

In case I didn't communicate it clearly enough, I did add from: "random" capabilities as well as gsap.utils.shuffle() to the latest beta, so you can try them out with this link: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js 👍

 

Do they work as you'd expect? 


Yes ! They work perfect for my case ! Thank you Jack for the super quick update ! Love it !  

  • Like 1
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...