Jump to content
GreenSock

dazzafact

Get Time of Tween by Label

Go to solution Solved by dazzafact,

Recommended Posts

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

Link to comment
Share on other sites

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

 

 

  • Like 1
Link to comment
Share on other sites

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

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

 

Link to comment
Share on other sites

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.

 

  • Thanks 1
Link to comment
Share on other sites

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


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

image.png

Link to comment
Share on other sites

  • Solution

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')

 

Link to comment
Share on other sites

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? 

  • Like 2
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.
×