Get tween type (to, from...) and ease function as string from tween

[BemjaxIDE]

Hi guys,

 

how can I get instantiated tween's ease function name?

I could do a workaround, but is there a way that is meant to be used :-) ?

...like tween.duration() or *.delay() for duration and delay

If an ease is set like a string it can be accessed in tween.vars as string, or I could iterate through all eases functions to find it...

is there a way?

 

 

Also is there a way to get gsap type after instancing...is the tween a "to"," from", "staggerTo"...?

 

Thanks guys,

Dario

 

 

 

 

[ZachSaucier]

Hey Bemjax and welcome to the GreenSock forums!

 

Interesting question. Why are you needing the ease name for a tween? Most likely there's a better way to do what you're trying to do than to get the name from the tween itself. 

 

12 minutes ago, BemjaxIDE said:

is there a way to get gsap type after instancing...is the tween a "to"," from", "staggerTo"...?

Another interesting question. And again I'm wondering: why do you need this information?  

[BemjaxIDE]

Hi Zach,

well I'm rebuilding timelines from tweens I got from timeline.getChildren(), and visualising them
Practical problem is in a drag and drop tool that can add existing tweens to a timeline, actually in the part that should edit an existing tween.

If this data cant be edited  then I have to rebuild a tween from initial vars (stored in tween.vars)...for this I need the type and tween I guess. Tween I can get (in tween.vars), if user used it during instancing

I had this tool for some time but I used it for delay, repeat and yoyo (for which there is an exposed function, respectively), but I'm expanding its functionality now and realized I cant read these two easily..

I could go inside of gsap and make some mild alterations to expose them, extend tween with .tweenType() and .ease(), I was wandering is there a simpler way...
 

[ZachSaucier]

Do you also have a data format to save to a file and load from saved files? Or do you plan to support that down the road?

 

If so, it would make sense to store all of the tween's information in a separate data format, which would work around the need for getting this information from the tween itself. Having a separate data format might be a better option anyway since users are manipulating things themselves.

[BemjaxIDE]

Yes  I do. 
I need these two for storage also.

Until now only the props, delay, repeat and yoyo were stored and .to was as default so during rendering *.to is assumed.
This, off course doesn't suffice so.... i need to find a way

Hipotheticaly tweens come from unknown source...imagine if you didnt instance it but you need to analyse it, and possibly rebuild it.
Is there a way to get these two? specially type?

 

 

 

 

 

[ZachSaucier]

I'd get the values when a new tween is created. Save that to your data format. Much easier and less error prone.

 

You can probably determine the tween type and ease name based on the Tween object that you have. I don't think there's convenient methods for those things like there are for other properties.

[BemjaxIDE]

I havent got control over the moment tweens are created... i just get an instanced tween.

Cant get function names unless i go inside the gsap Tween() constructor and make alterations....or at least in the .to, .from(...) functions.

It would be a blasfemy  to taint gsap like this 😕

And if I do this, this is only for a solution I am runing locally, for my gsap instance.

If a tween is  instanced  in another window ( from another gsap, used by a user - not tainted ) i'm again not able to read it this way.

 

Ill keep bumping the wall a little bit longer...strange ideas come from a headache
Tnx 

 

[GreenSock]

A "from" tween will have a "runBackwards: true" in the vars object. 

 

The staggerTo(), staggerFrom() and staggerFromTo() methods are deprecated in GSAP 3 and they return a Timeline instance which you can sense with various techniques, but is that what you're looking for? Remember, a "stagger" can be added to any tween now too - are you looking for some way to sense when there's a stagger in the vars? 

 

Also, remember that you can store arbitrary data in a tweens "data" property in case you want to tap into that for your identification purposes. Like you could set data: "tween" for all your tween instances, "timeline" for your timelines or whatever. I'm not saying that's the ideal way - I'm just making sure you know that option exists. 

[OSUblake]

2 hours ago, BemjaxIDE said:

how can I get instantiated tween's ease function name?

 

You can get the ease map like this.

 

var easeMap = gsap.parseEase();

 

But that will only give you registered eases. Someone could use an unregistered ease. It's just a function. 

 

gsap.to(".box", {
  x: 500,
  ease: p => p
})

 

 

[BemjaxIDE]

Hi Blake,

the ease is not that of a problem, if its not in the tween.vars than default is assumed. 
If its a function I can save functions. 
If I want to visualize function in a human readable way i was planing to run through .parseEase() result to find it by name.

if none then use name "Custo"

tween.ease() would be nice

The problem is in "sensing" as Jack described. Its a part of an inspector that inspects GSAP tweens.

Tweens get created in different windows, in different ways with different gsap versions, get passed to the tool so tool gets a tween already detected.
I realised I dont have a way to change the tween after its created so I was updating the tool.... so it can alter type and ease also.

Then realized  I cannot detect the original type, at least not that easy  

Tool generates a new tween based on the values of the inspected one  and inserts it in  array from which inspected one originates ....a new timeline is created then from these.
Happens each time there is a change in the timelines tweens structure,order or properties.

When rebuilding the timeline and tweens, a *.to() tween was assumed until now.

On save it was also using only data in tween.vars for each tweens

Sequencer GUI is repainted again from the created timeline, and so on...

 

Hi Jack,

yes thats exactly what I am trying. 
Inspecting a tween after it was instantiated...
 

could  you guys give short way to

function isTo(tweenInstance){

 

}

and how to 

function isStagger(tweenInstance){

 

}

these two together make a test for all gsap functions, i guess

 

 

 

 

[GreenSock]

5 minutes ago, BemjaxIDE said:

Then realized  I cannot detect the original type, at least not that easy  

 

 

When you say "type", do you just mean a to() or from()? What about a fromTo() or a timeline? 

 

Keep in mind that there are really only two basic "types" of animations in GSAP - a Tween and a Timeline. Do you need a way to sense those? 

 

7 minutes ago, BemjaxIDE said:

, in different ways with different gsap versions,

This worried me. Are you trying to build something that works with the old version 2 stuff AND version 3? 

 

With those function signatures, please tell me exactly what you want it to return (ALL of the options). 

[BemjaxIDE]

For a tween, not a timeline.

I know a timeline can hold children timelines, but this doesn't worry me, not yet, it will after this

I am referring to the function names as types , sorry ...they are to, from, fromTo, staggerTo ...

I need to detect them...all as strings.

Could 2 functions cover all combinations?

Lets just assume its gsap3.

 

var tween = gsap.to("body",{x:10, duration:1})

function isTo(tweenInstance){
   // return true/false, 
  //what with fromTo and toFrom??
}

function isStagger(tweenInstance){
   // return true/false
}

 

Which also bring me to ask :
are there differences in tweens if two are created with version 3, same one,  but with different syntaxes ...gsap.to() vs. TweenMax.to ...do they yeld absolutely same result?

Thank you for your help guys

 

 

 

[BemjaxIDE]

//wrkflw
//from a  tween...
var tl = new gsap.timeline();
tl.add(gsap.to('body', {
    x: 10,
    duration: 1
}));
var tweens = tl.getChildren();
//...get data to recreate this tween...
var tween = gsap.to(tweens[0].targets(), tweens[0].vars);
//need to detect the function as string
//so i can faithfully replicate tween
//something like
/*
function getFunName(tw){
  //test props to find what fun is it
  //if("someProp" in tw ...)
  //example its a gsap.to()
  var funName = "to"
  return funName;
}
var fun = getFunName(tweens[0])
var tween = gsap[fun](tweens[0].targets(), tweens[0].vars);
*/
var tl2 = new gsap.timeline();
tl2.add(tween);

a workflow example....

[GreenSock]

3 hours ago, BemjaxIDE said:

I am referring to the function names as types , sorry ...they are to, from, fromTo, staggerTo ...

I need to detect them...all as strings.

Could 2 functions cover all combinations?

Gosh, this feels very hacky and I personally would never build something this way. I strongly suggest you rethink your approach. 

 

It's like you're trying to tie things directly to certain API calls that actually have very little to do with the things they produce. You can get a Tween instance many different ways. Take staggerTo(), for example - that's just an [old] convenience method that increments the delays of a bunch of tweens, but you could do the same thing in a loop or other ways too, so the resulting tweens have nothing to do with the "staggerTo()" method itself. It's like looking at a Dollar bill and wanting to tell (just by inspecting it) if it was acquired via an ATM machine or the cash register at the grocery store or your buddy who paid you back for the coffee you bought him the other day. The money doesn't carry that information on it. And I still don't understand why you even need this info for your tool. Wouldn't you just care if it's a tween or timeline? Who cares which convenience method produced it? 

 

But if you insist, I will say that from() tweens have runBackwards: true in the vars, fromTo() will have a startAt object in the vars, and a to() tween has neither (well, unless the user manually specified those which they certainly can do but it isn't common). I hope that helps. 

[BemjaxIDE]

On 4/24/2020 at 4:48 AM, GreenSock said:

Gosh, this feels very hacky and I personally would never build something this way. I strongly suggest you rethink your approach.

yeap, its a quick hack, I had everything else so i thought to just add tween editing and saving in a couple of minutes, but it turned out a little bit longer
Do you suggest any other approach... i collect vars from tween.vars, get the id of the DOM el...how do you suggest rebuilding the tweens?
I dont need the to(), from() etc? 

 

On 4/24/2020 at 4:48 AM, GreenSock said:

 

But if you insist, I will say that from() tweens have runBackwards: true in the vars, fromTo() will have a startAt object in the vars, and a to() tween has neither (well, unless the user manually specified those which they certainly can do but it isn't common). I hope that helps. 

Thanks, this is enough to detect them!

[OSUblake]

6 minutes ago, BemjaxIDE said:

Do you suggest any other approach... i collect vars fro tween.vars, get the id of the DOM el...how do you suggest rebuilding the tweens? 

 

What is wrong with you show here?

var tween = gsap.to(tweens[0].targets(), tweens[0].vars);

 

[OSUblake]

Seems to work fine.

 

See the Pen aba1fb11bdfa4d7852832d961ff5bc30 by osublake (@osublake) on CodePen

 

 

[BemjaxIDE]

Thanks Blake!

If to() is enough then I have no problem, i thought it will influnce the tween. Seemed logical.
Thank you for your time and patience guys.

[OSUblake]

15 minutes ago, BemjaxIDE said:

If to() is enough then I have no problem, i thought it will influnce the tween. Seemed logical.

 

Nah. That's what Jack was trying to say. There is nothing is special about the different tween methods. They just add special properties to the vars object, like runBackwards and startAt.