Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
anishjana_

Does timeline takes sec:millisecs(e.g: 1.67) as absolute-Duration ?

Recommended Posts

I dont have a codepen to show or reproduce what my large scale app does but I am using fabric.js to create animations on canvas and have multiple slides to convert it to a slideshow or video.
 

All i can share is a small snippet of where i call the functions at certain time i.e particular card.duration (which can take decimals as well). But the next function is called before the designated absolute duration. All I want to know if timeline accepts millisecs and makes gauranteed call at that particular time!

 

 

totalDuration = 0;
for (let i = 0i < cardLinkedList.lengthi++) {
        const card = cardLinkedList[i];
        timeline.call(
          textAnimation,
          [canvascardtransitionlogo],
          totalDuration
        );
        totalDuration += card.duration;
      }
 
timeline.play();

 

Link to comment
Share on other sites

Hey anishjana_ and welcome to the GreenSock forums.

 

2 hours ago, anishjana_ said:

But the next function is called before the designated absolute duration.

What do you mean by this? Are you saying that the textAnimation function is called before a period of time equal to totalDuration? If so, please create a minimal demo of that situation because it should not be happening.

 

2 hours ago, anishjana_ said:

if timeline accepts millisecs and makes gauranteed call at that particular time!

All times in GSAP are in seconds, but you can use milliseconds by going out three decimal places. As for whether or not something is guaranteed to be called at a particular millisecond, that's impossible to do exactly whether or not you're using GSAP. In fact the question itself doesn't exactly make sense because what if the entire function can't finish in the span of a millisecond? 

 

You can bet that the function will be called as soon as it can be after the duration of time provided has been passed. It can be in the same millisecond but it might be up to a few milliseconds afterwards. @GreenSock can confirm.

Link to comment
Share on other sites

8 hours ago, ZachSaucier said:

You can bet that the function will be called as soon as it can be after the duration of time provided has been passed. It can be in the same millisecond but it might be up to a few milliseconds afterwards. @GreenSock can confirm.

Yep, it's literally impossible for any tool to guarantee something will get called at an EXACT number of milliseconds just because the CPU might be busy with other tasks or whatever. GSAP will make the call as soon as the playhead hits (or passes) that spot, yes. 

 

For example, if the browser runs its requestAnimationFrame updates once ever 16.67ms but you have your function call scheduled such that it lines up at 10ms after one of those updates, it may be 6.67ms "late" in calling it. It would never happen early, though.

 

And don't assume that even using a setTimeout() would be exact either - browsers work in almost the same way with those too. You should never write your code in such a way that it absolutely depends on something running at an exact number of milliseconds later. 

 

Does that answer your question? 

  • Like 1
Link to comment
Share on other sites

21 hours ago, ZachSaucier said:

What do you mean by this? Are you saying that the textAnimation function is called before a period of time equal to totalDuration? If so, please create a minimal demo of that situation because it should not be happening.

To get the real time call, I consoled the current date in ms inside textanimation function and found out difference between the consecutive calls. the difference is less than the duration that has been set (for eg : textanimation called at 4.8 instead of 5th sec). Interestingly, on further investigation by consoling the time line , the difference between 4.8 and 5 was found in a parameter known as _ztime. 

Ofcourse web browsers or system cannot gaurantee any perfect timing, but wanted to know if any offset is being set while calling functions inside timeline
 

Will try creating a codepen in a day or two

Link to comment
Share on other sites

6 hours ago, anishjana_ said:

...wanted to know if any offset is being set while calling functions inside timeline

I didn't quite follow that. What do you mean by "offset"? 

 

GSAP is a completely synchronized system and when the ticker (typically driven by requestAnimationFrame) updates, ANY tweens/timelines get run at that time and they all use a common time so that there's never any drift. For example, if you've got a super-intensive loop of 1,000,000 iterations or whatever, so it takes a long time, the tween at the start of that loop will have the same start time as one created at the end of that loop because they were created on the same "tick". That's a GOOD thing, trust me. Otherwise you'd have code that's supposed to start/end at the same time, but it actually doesn't because of the processing time it may have taken on a single tick/update. 

 

Even the way GSAP handles looping is impervious to the time creep that most other animation systems introduce because they use a simplistic "start over onComplete", thus you'll get a little bit of time creep on every iteration (but not with GSAP). 

 

I'd love to see a simplified CodePen to better understand what you're asking. 

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