dazzafact Posted March 11, 2022 Share Posted March 11, 2022 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 More sharing options...
OSUblake Posted March 11, 2022 Share Posted March 11, 2022 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 }) 1 Link to comment Share on other sites More sharing options...
dazzafact Posted March 11, 2022 Author Share Posted March 11, 2022 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 }) Link to comment Share on other sites More sharing options...
OSUblake Posted March 11, 2022 Share Posted March 11, 2022 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. 1 Link to comment Share on other sites More sharing options...
dazzafact Posted March 12, 2022 Author Share Posted March 12, 2022 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 Link to comment Share on other sites More sharing options...
Solution dazzafact Posted March 12, 2022 Author Solution Share Posted March 12, 2022 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 More sharing options...
GreenSock Posted March 12, 2022 Share Posted March 12, 2022 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... 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. 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". 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? 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now