Get Time of Tween by Label

[dazzafact]

I'm a bit confused how to set labels correctly. In this example I don't get the start time of the tween (1.second), but the time BEFORE the tween (0 second)
How do I get the start time of a tween now? 🤔

tl.add('start')
tl.to('.rectangle', {
  duration: 4,
  opacity: 1,
  repeat:0,
  x: '360',
  scale:2
},'1') //<--- starts 1
tl.addLabel('ends')
 
r1=getNestedLabelTime(tl,'start')
alert(r1);// prints --> 0 

 

See the Pen rNpBqGr by dazzafact (@dazzafact) on CodePen

[OSUblake]

Hi Dazzafact,

 

0 is the label time, but you set your tween to start at 1 second. If you set a position parameter time value like that, it's absolute, so it's independent of any labels.

 

Perhaps you are looking for something like this? Now the start label is at 1 second, so the next item will automatically start at that.

 

tl.add('start', 1)
tl.to('.rectangle', {
  duration: 4,
  opacity: 1,
  repeat:0,
  x: '360',
  scale:2
}) 

 

 

[dazzafact]

 Hey, thanks for your support 🤍
I just saw, that the relative time is also stored in "_start" .

OKay, that's exactly what I need 🙂. Then I have to rewrite my function a bit.

It is a pity that this absolute parameter was not made available directly in GSAP 🤔 

In my Case: I have many overlapping Slides (like ">1.2") to simulate Transitions. So all new Slides starts with Transitions overlapping (shifted) with the previous Slide.

Ok, i  think i also have to put an new Key for that in it, to label the Tween

tl.to('.rectangle', {
  duration: 4,
  opacity: 1,
label:'slide34',
  repeat:0,
  x: '360',
  scale:2
}) 

 

[OSUblake]

10 minutes ago, dazzafact said:

I just saw, that the relative time is also stored in "_start" .

 

Yeah, don't try to use anything prefixed with a _, like _start, as it might not be the value you think it is.

 

If you want to find out the start time, you can use the startTime method.

https://greensock.com/docs/v3/GSAP/Timeline/startTime()

 

And if you want to get a particular tween, you can use getById.

https://greensock.com/docs/v3/GSAP/Timeline/getById()

 

And there's also getChildren and getTweensOf.

 

[dazzafact]

Thank you,
i tried startTime() like you  recommended, but it gives me diffrent values each time (like 0.764). see picture or try Codepen. 🤔

If i want to use getById(), how do I get the starttime ("_start") in the right way (without getting an incorrect value back like you mentioned)?
But if I can't access the variable "_start" by using getById(), what else is good for using getById()?

 

See the Pen xxpxVBe by dazzafact (@dazzafact) on CodePen

[dazzafact]

Hey, I just extended the methods in GSAP now.
But is there a better way without touching the raw source?
 

 _proto2.getParamBySec = function getParamBySec(begin,params) {
      var animations = this.getChildren(1, 1, 1),
          i = animations.length;
      while (i--) {
		
        if (begin>=animations[i]._start  ) { 
			if(typeof(animations[i].vars[params])!="undefined"){
				 return animations[i].vars[params];
			}
         
        }
      }
	  return false
    };

tl.to('.rectangle', {
  opacity: 1,
  imageNum:3,
  slideNum:1,
  repeat:0,
  x: '2',
  scale:1
},'4');



twe=tl.getParamBySec(4,'slideNum')

 

[GreenSock]

4 hours ago, dazzafact said:

i tried startTime() like you  recommended, but it gives me diffrent values each time (like 0.764). see picture or try Codepen. 🤔

I think you're misunderstanding quite a few things...

1. You're getting the startTime of the timeline which refers to its start time on the GLOBAL timeline. Why are you doing that? What's your goal? The reason it can be different each time is because your web page may take some time between when GSAP actually loads and when it executes your JavaScript code that creates the timeline. That's totally normal and expected. I'm still baffled as to why you'd ever even want that value in the first place. 
2. There is absolutely no difference practically-speaking between _start and startTime() except the latter serves as both a getter and a setter. You should never access or alter anything that starts with _ because it's considered "private". 
3. You should never add arbitrary properties into your tween that you don't actually want animated. For example: 

   tl.to("#id", {
     slideNum: 1 // <-- WHAT?
   });

   That's literally telling GSAP to animate the slideNum property of that element to 1. Remember, GSAP can animate ANY property of ANY object. If you're trying to store raw/arbitrary data in a tween like that, you can use the official "data" property for that. But honestly, this sounds like a bit of an engineering issue - why are you trying to store things like that anyway? I suspect there's a cleaner way of structuring your code/logic to facilitate that. Of course you're welcome to use the "data" property if you want...I'm just saying it smells like a potential engineering issue. 

Does that clear things up?