Jump to content
danehansen

Tween an array value

Recommended Posts

Is there a way to tween the values of an array when in a for loop? I saw that there was an endArray plugin for the AS version of greensock which is close to what i'm looking for, but it doesn't appear to exits in js. Trying to do something like this:

 

var array=[0,1,2,3,4,5];

 

for(var i=0; i<array.length; i++)
{
    TweenLite.to(array, 0.5, {i:0});
}

Share this post


Link to post
Share on other sites

Hi,

 

I'm afraid that because of the nature of arrays and how GSAP works this can't be done.

 

The issue is that in your array the objects are values but they don't have any properties assigned to them. For example when you tween an element's left position you indicate the element, the property you want to tween and the ending value. In this case you have the element and the ending value, but the ending value of what?.

 

To solve this you can create an array of objects, give those objects the starting values and finalyy tween those values, like this:

var array = [{a:1},{a:2},{a:3},{a:1},{a:2}],
    amount = array.length;
	
for(var i = 0; i < amount; i++)
{
    var element = array[i];
    TweenMax.to(element, 1, {a:0});
}

Like that you'll be tweening the values of the a property of each object in the array.

 

Best,

Rodrigo.

  • Like 2

Share this post


Link to post
Share on other sites

Actually, JavaScript is crazy flexible (uncomfortably so sometimes), so I'm pretty sure you can do this:

var a = [1,2,3,4];
var b = [0,0,0,0];
b.onUpdate = function() {
	console.log(a[0], a[1], a[2], a[3]);
};
TweenLite.to(a, 2, B); //tween the values of a to those of b over 2 seconds, and log them to the console.

Arrays are just objects whose properties are named numerically instead of using strings. 

  • Like 8

Share this post


Link to post
Share on other sites

Mhh... no vars in the constructor?! You learn something new every day.

 

Rodrigo.

Share this post


Link to post
Share on other sites

Yeah, I'd consider this a "hacky" solution, but a solution nonetheless. It trades on the fact that Arrays are just Objects like any other object, and you can add properties. Notice I added an onUpdate property to an array! Weird, I know. You can even do that to functions themselves. 

Share this post


Link to post
Share on other sites

Insert Twilight Zone music please.... :mrgreen:

 

Mind bending.

 

Thanks Jack!!

Rodrigo.

  • Like 1

Share this post


Link to post
Share on other sites
I have a need to do something like this:


    var blah = {

        asdf: [1, 2, 3],

        zxcv: 7

    };

    TweenLite.to(blah, 1.0, {

        asdf: [4, 5, 6],

        zxcv: 8,

        onUpdate: function() {

            console.log(JSON.stringify(blah, null, 2));

        }

    });


 

When I run that, the last value that I get is:

{

  "asdf": "31,2,3",

  "zxcv": 8,

  "_gsTweenID": "t6"

}

 

The intermediate values only show the first element of "asdf" and "zxcv" value changing. Is there a plugin that could make arrays tweenable to other arrays?

Share this post


Link to post
Share on other sites

Thanks, but I was hoping to not have to tween the array itself. I want to tween an array that is the property of an outer object.

Share this post


Link to post
Share on other sites

@Type1J, I don't quite understand the distinction you're making or why it would matter. Can you help me understand? Either way, you're tweening the exact same array, right? What does it matter if you're pointing at it from an object as well? 

Share this post


Link to post
Share on other sites

@GreenSock Here's what I mean:

 

    var objectInSpace = {
        position: [1, 2, 3],
        scale: [0.0, 0.0, 0.0],
        opacity: 0.0,
        otherProp: 7
    };
    TweenLite.to(objectInSpace, 1.0, {
        position: [4, 5, 6],
        scale: [1.0, 1.0, 1.0],
        opacity: 1.0,
        otherProp: 42
    });
 
That's what I want to write because I can seek, play, or reverse that Tween alone. Instead, I have to make 3 tweens (1 for scaler properties, and 2 for the 2 vector properties), and add them into a timeline (all at 0) if I want it to work with an unmodified TweenLite.
 
I'm using a 3D model package that has transforms in arrays. I think that I'm just going to modify the package to add scaler properties that will accomplish the same goal.

Share this post


Link to post
Share on other sites

You could do something like this:

function tween(target, duration, vars) {
    var tl = new TimelineLite({delay:vars.delay || 0}),
     copy = {},
     p;
    for (p in vars) {
        if (p === "position" || p === "scale") {
         tl.to(target[p], duration, {endArray:vars[p], ease:vars.ease}, 0);
        } else if (p !== "delay") {
         copy[p] = vars[p];
        }
    }
    return tl.to(target, duration, copy, 0);
}

That way, you can just call tween() kinda like a regular TweenLite.to(), and it'll spit back a TimelineLite that acts exactly the way you want, and is totally controllable. Just a thought. 

  • Like 1

Share this post


Link to post
Share on other sites

@@Type1J

 

Just curious, what 3D package are you using?

 

I had similar issues using Pixi.js. Most properties that are based on x/y values use a point class. So things like position, scale, anchor, pivot, etc. are all objects on an object. It's very convenient for setting and copying things, but a pain to animate. So to animate something I would have to use a timeline like this.

tl.to(sprite, 1, { alpha: 0.5 }, 0)
  .to(sprite.position, 1, { x: 100, y: 100 }, 0)
  .to(sprite.scale, 1, { x: 0.5, y: 0.5 }, 0);
  

Very annoying, so I know what you're going through. I started working on a plugin, but it turns out somebody already beat to me to the punch. Thanks to the pixi plugin, I can now rewrite that timeline like this.

TweenLite.to(sprite, 1, { pixi: { alpha: 0.5, x: 100, y: 100, scale: 0.5 }});

I know you not using pixi, but the point is that you could just write your own plugin. Look at how dead simple the code for the plugin is. That is by far the cleanest looking code I've ever seen in a GSAP plugin.

https://github.com/noprotocol/gsap-pixi-plugin/blob/master/PixiPlugin.js

 

@Jack

That plugin would be a nice addition  ;-)

  • Like 1

Share this post


Link to post
Share on other sites

@GreenSock Thanks! That's a great quick fix, but I'm still thinking that adding scaler properties is the way to go here since I'm trying to make this engine easy to use with as much of GSAP as I can.

 

@OSUblake It's Atomic Game Engine (AGE). AGE is a fork of Urho3D that adds a much easier to use editor, a JavaScript interpreter, and a really nice C++ to JavaScript bindings auto generator. Just to support TimelineMax, I added requestAnimationFrame, and a few other objects and functions that TimelineMax.js expects to exist.

 

@GreenSock: I'm planning on making an example project for AGE (after the scaler property mods) on how TweenMax/TimelineMax can be used in it. First of all, I'd like to ask if releasing an example is permissible. The engine and examples are under the MIT licence. I was planning to put a note about the GSAP licences and pricing in the example. If it is permissible, do you have any preferences on what I should include in the comment at the top of the example?

Share this post


Link to post
Share on other sites

Absolutely, you're welcome to release an example. We encourage that sort of thing. The only thing we ask is that you make mention of the fact that GSAP is subject to its own license which is located at https://greensock.com/standard-license/, and maybe encourage them to get GSAP from our own repo or web site just so that they have the latest and greatest version. You don't have to talk about pricing or anything like that. Oh, and of course please don't include any of the members-only plugins in your open source repo :) 

 

Good luck with the project!

Share this post


Link to post
Share on other sites

Thanks! That sounds great. Thanks for making this great library!

Share this post


Link to post
Share on other sites

I'm not familiar with AGE. So how does that compare to Unity?

 

Are you on Twitter or have a blog? I'd like to follow what you got going on.

Share this post


Link to post
Share on other sites

@OSUblake I haven't really used Unity that much, so I'm not sure.

 

Some C# scripting is in the works for people transitioning from Unity, but right now the main languages are C++, Javascript, and anything that will compile into Javascript (TypeScript, CoffeeScript, etc.). The editor is still in the "Early Access" stage, and doesn't have all of the features planned, but it already is much easier to use than the Urho3D editor, and the engine is already used in published games.

 

I unfortunately don't have any feeds, but I will post the example link as a new topic in these forums when it's done.

 

Here's a few links for AGE:

http://atomicgameengine.com/

https://github.com/AtomicGameEngine/AtomicGameEngine/

https://github.com/AtomicGameEngine/AtomicExamples/

  • Like 2

Share this post


Link to post
Share on other sites

Actually, JavaScript is crazy flexible (uncomfortably so sometimes), so I'm pretty sure you can do this:

var a = [1,2,3,4];
var b = [0,0,0,0];
b.onUpdate = function() {
	console.log(a[0], a[1], a[2], a[3]);
};
TweenLite.to(a, 2, ; //tween the values of a to those of b over 2 seconds, and log them to the console.

Arrays are just objects whose properties are named numerically instead of using strings. 

Brilliant!

Share this post


Link to post
Share on other sites

That's fantastic with the array functionality. Worked like a charm and very smooth transitions. this library rocks.

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.