Jump to content
Search Community

Tween an array value

danehansen
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

Posted

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});
}
Posted

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
Posted

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
Posted

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

 

Rodrigo.

Posted

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. 

Posted

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

 

Mind bending.

 

Thanks Jack!!

Rodrigo.

  • Like 1
  • 2 years later...
Posted
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?

Posted

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.

GreenSock
Posted

@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? 

Posted

@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.
GreenSock
Posted

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
Posted

@@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
Posted

@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?

GreenSock
Posted

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!

Posted

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

Posted

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.

Posted

@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
  • 3 weeks later...
Goon Nguyen
Posted

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!

  • 1 year later...
Jason Russo
Posted

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

  • Like 2
  • 3 years later...
Posted

How should we phrase this with GSAP v.3? It's not clear from the docs and all forum posts on this predate v.3.

Posted

Hey there!

If you're just trying to use the above code snippet you just have to swop out tweenLite for gsap and move the duration a little. (although it will still work with the duration outside of the vars object.)

If you need more help could you make a new forum post?
 

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

// would be

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

 

  • Like 1
Posted

TIL - that's cool.

  • Like 2

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...