Jump to content
Search Community

Tween an array value

danehansen test
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

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});
}
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

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

Link to comment
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.
Link to comment
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
Link to comment
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
Link to comment
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?

Link to comment
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!

Link to comment
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
Link to comment
Share on other sites

  • 3 weeks later...

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!

Link to comment
Share on other sites

  • 1 year later...
  • 3 years later...

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