Jump to content


Array tweening with function parameters

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,


I'm new to GSAP, but it looks very cool and is almost perfect for my application.


I have an object with a 3D position "property", but that uses getters and setters, and returns a copy of the array in the getter.

object.position([x, y, z]);
var zval = object.position()[2]; // getter returns internalpos.slice()

My ideal syntax would be something like this:

TweenMax.to(object, 1, {position: [x, y, z]});

This doesn't work as arrays will need some special handling to do element-wise manipulation which GSAP doesn't do by default.


If the position property was the array itself, then either of these would work:

TweenMax.to(object.position, 1, [x, y, z]);
TweenMax.to(object.position, 1, {endArray: [x, y, z]}); // Using EndArrayPlugin

Unfortunately with the getter returning a copy, there is no way to get a reference to the internal array object, so no way that I can see of using GSAP directly. It would also be nice to be able to list multiple properties in the same tween.


So I probably could rustle up a plugin to handle "position", etc, specifically. But I wonder if it would be possible to make that more generic. Perhaps syntax like this could work:

TweenMax.to(object, 1, {arrays: {position: [0, 1, 2], rotation:[0, 0, 0]}});

Any thoughts? Is the above going to be possible with a plugin, and could it reuse the existing GSAP magic for detecting raw properties vs getters/setters?



Link to comment
Share on other sites

Sure, you could definitely do that with a plugin (as you suspected), but I wouldn't want to add that functionality to the core because of the extra conditional logic that'd have to run for every tween and the extra kb, especially considering how few people would likely use it (you're the first to request it). That plugin is pretty trivial to create so I took a crack at it myself (see attached). It'd let you do things like this (once you load the plugin of course):

TweenMax.to(object, 1, {arrayProps: {position: [0, 1, 2], rotation:[0, 0, 0]}});

In fact, here's some dummy JS to show you it working:

var MyClass = function(position) {
	this._position = position;
	this.position = function(value) {
		if (!arguments.length) {
			console.log("getting "+this._position);
			return this._position.slice(0);
		this._position[0] = value[0];
		this._position[1] = value[1];
		this._position[2] = value[2];
		console.log("setting position to "+value);

var obj = new MyClass([0, 10, 20]);
TweenLite.to(obj, 1, {arrayProps:{position:[100,-200,-500]}});
Is that what you were looking for? 


  • Like 4
Link to comment
Share on other sites

That's awesome Jack, thanks very much.


For extra points for syntactic niceness, is it possible to have a plugin that would automatically promote any values specified as arrays into the arrayProps variable? Perhaps similar to how autoCSS works? I'm looking into your implementation of that now...



Link to comment
Share on other sites

After looking into the autoCSS, I've done something similar for autoArrayProps.


I've forked your github repository, so you can see the change here:



I presume there's a build process to enable these changes to be included in the "Max" and minified versions? There's nothing in github that would do that, as far as I can see.



Link to comment
Share on other sites

Cool. And no, there isn't a build process for including things in TweenMax. I do use Grunt to crank out the minified versions and copy/zip files, but that's all. If you want to recommend a particular tool and/or build process, I'm all ears. 

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.