Jump to content
Search Community

Catch pause moment

NamelessGhoul test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello!

 

I'm trying to catch library's internal pause event and I'm not sure I'm looking in the right place.

 

In my code I have this loop:

for (var i = 0; i < this._gaps.length; i++) {
    this.addPause(this._gaps[i], function() {
        console.log('%cpaused', 'color:red;font-weight:bold;');
        Utils.afterRepaint(function() {
            if (_self.paused()) {
                _self.resume();
                console.log('%cpaused off', 'color:red;font-weight:bold;');
            }
        });
    });
}

And I'v also put console.log() in library: (starting at line 1609)

if (pauseTween) {
    console.log('gsap pause');
    console.log(pauseTween);
    this._time = time = pauseTween._startTime;
    this._totalTime = time + (this._cycle * (this._totalDuration + this._repeatDelay));
}

There is delay between those logs, that's why I think that it's not the right place where to check it. Could you point me in the right direction?

Link to comment
Share on other sites

Hi Jonathan!

 

Thanks, I'v heard good stuff about this community support! ;)

 

To your question - kind of. Actually the time doesn't matter to me, I just want to log the exact moment when the timeline get's paused. I'm comparing what I see on screen on logs. It looks like my timeline gets paused at the wrong time altought my own 'paused', 'unpaused' events show up at the right time. This problem occurs only on LG WebOS 2. 

 

I created codepen, not sure how useful it is though. 

See the Pen ORoBNP by anon (@anon) on CodePen

 

So yeah, what I would like is to also log interal pause event.

Link to comment
Share on other sites

Hi @NamelessGhoul. Welcome to the forums. Very happy to hear about the positive reputation of this community. Puts a smile on my face. 

 

Anyway, about your question, I'm also a bit confused because I'm not quite sure if you're saying that you think the callback that you've got in the actual addPause() method isn't getting called immediately, or that you're having trouble with your own code and ensuring that a different function is called on the very next requestAnimationFrame tick. Can you clarify? It looks like your code would wait for 2 requestAnimationFrame cycles, so perhaps that's the problem? 

 

In other words, inside your afterRepaint() function, you've got a requestAnimationFrame() that will wait for the NEXT time the browser refreshes the screen, at which time you've got ANOTHER requestAnimationFrame() inside _startRender() that will wait for another browser refresh, and finally call your callback. Perhaps you weren't aware that requestAnimationFrame() would wait for the next refresh (thus delay things)? Totally guessing here. I may have completely misunderstood what you're asking or what the perceived problem is. 

 

Oh, and minor note: your codepen demo is not using the latest version of GSAP. I'd recommend linking to the 1.19.0 version on the CDN directly (not the "latest" which, unfortunately, our CDN provider refused to update after 1.18.0).

  • Like 2
Link to comment
Share on other sites

Oh, and one more side note: there's a gap between the "paused" and "unpaused" logs in your codepen simply because you're logging "paused" immediately when you're adding the pause to the timeline rather than when it actually happens. So since you're placing it 1 second in the future, the callback won't get called until then. Seems to work as expected.  

  • Like 2
Link to comment
Share on other sites

Thanks, I fixed the issues you mentioned. 

See the Pen ORoBNP by anon (@anon) on CodePen

I'm not sure that it fixes the problem though. My own calls get executed when I expect them ( pause and pause callback). This mind sound silly, but maybe there's a chance that callback is called before actual pause happens? That's why I wanted to log internal pause process. The one I put at line 1609 is logged later than my pause and pause callback logs.

 

The thing is that this pause/resume action should happen when nothing is being animated. My logs prove it, but the one on line 1609 is called in the middle of animation. 

 

Sometimes that animation freezes and I'm thinking that maybe this is the reason. Unfortunately I can't reproduce the freezing in codepen as this happens only on WebOS.

Link to comment
Share on other sites

Just to add my two cents. The below is not about the pause question but just an observation on the CSS properties your animating. I noticed your animating CSS position offsets like top and left. You should change top to y (translateY) and left to x (translateX).

 

I forked your codepen and changed top to use y and left to use x:

 

See the Pen dpqAbP by jonathan (@jonathan) on CodePen

 

The reason Why? When you animate position offsets you are telling the browser to keep triggering layout to recalculate the position offsets of top and left. But when you animate transforms instead like x and y the browser doesn't need to recalculate the geometry of the element. So you get a much smoother animation and it the browser can take advantage of the hardware acceleration.

 

This site shows what CSS properties trigger layout and geometry calculations

 

left: https://csstriggers.com/left

top: https://csstriggers.com/top

 

vs

 

transforms: https://csstriggers.com/transform

 

Resources:

Article written by GreenSock's Jack: https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

:)

Link to comment
Share on other sites

I'm still a little fuzzy on what the problem is that you're describing (like exactly which two calls have a gap between them and how to reproduce that), but this is where the actual pause() occurs in TimelineLite (inside TweenMax):

https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L1094

 

Is that what you're looking for? It happens right before that "tween" (pause) gets rendered which is when the callback would get fired. From what I can tell, it's exactly where it should be. 

 

Might the issue be related to a flaw in LG WebOS 2 and how/when it triggers the requestAnimationFrame()? (Just a guess). Or are you saying that you think there's a logic flaw in GSAP itself that's causing things to fire at the wrong time? 

  • Like 1
Link to comment
Share on other sites

Thanks!

Yes, that's what I was looking for. I will try it and give an update later.

As to your last question - I'm not blaming anyone / anything, but I am considering both possibilities. I'm at the moment where we have done every imaginable thing to boost performance on webOS and checking every single small thing that could be the reason for those freezes.

 

EDIT: Everything is good with pause. Problem is somewhere else. Thanks for your help!

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