Jump to content
GreenSock

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

How to approach an infrequent bug?

Recommended Posts

Hi all!

Was just after a bit of advice really, as I understand it's almost impossible to help someone without a small code example!

I've a project that I'll be using as a portfolio piece for my first coding job, so I've been animating it up in an attempt to hopefully make it impress :) I've got so close to making it work how I want, but there's an intermittant bug when rendering an alert on the page (It double renders/flashes).

The problem is it's so infrequent that I'm struggling to know how I should try and approach debugging it. It can go 3 minutes with no issues, or it can happen a few times in a minute. I've slowed a lot of the animations down to try and help identify the problem, but with no luck

I've a video of it https://youtu.be/ToPY530UJzw here if anyone minds taking a look (bugs @1:10@1:24@2:05). I was hoping that maybe it reminded someone of a bug they'd come across, or maybe something related to using timelines incorrectly? I thought it kind of looked like an issue with immediate rendering with a fromTo? ...but I set that to false
and no luck 🤷‍♂️

It's just so weird it works fine so much of the time...!

Thanks,

Nick

  • Like 1
Link to comment
Share on other sites

  • NickWoodward changed the title to How to approach an infrequent bug?

Heya!

First thing I'd do is pop a console log in the function that's being called when the alert shows. Double check how many times that function's being called. Also add an onStart callback in the GSAP tween and see if those numbers match up.

Pop back again if the function's only being called once but the GSAP tween is being called twice or there's some inconsistency.

You're right though, without code or a demo we can't really help much!

 

Good luck.

  • Like 3
Link to comment
Share on other sites

Hi Cassie,

Yeah that's a good idea comparing a console log with onStart, I'll give that a try!

So you don't think it's likely that I'm repeatedly calling gsap by accident and it's somesort of memory issue/leak/idiocy on my part? I mean obviously I'm making that up, but there's nothing like that that could be happening? Is there any way (outside of onStart) to see in devtools if *any* animations are running (rather than just the one I think is running and am adding onStart to)?

 

13 hours ago, Cassie said:

You're right though, without code or a demo we can't really help much!

I mean you could complete my portfolio? 🙏

Thanks for the help!

Link to comment
Share on other sites

I might have spotted something - Is there any way to look at the tweens that the timeline is made up of as it is called?

Link to comment
Share on other sites

7 minutes ago, NickWoodward said:

I might have spotted something - Is there any way to look at the tweens that the timeline is made up of as it is called?

I'm not sure what you mean by "look at", but timelines have a getChildren() method you can use to grab them and then console.log() whatever you're looking for. 

 

You can add an onUpdate to any tween and then console.log("tween one") for example. There are many ways to monitor what's going on with callbacks. 

 

Good luck!

  • Like 1
Link to comment
Share on other sites

That is what I mean by "look at", so thanks!

Link to comment
Share on other sites

Ugh, no differences between the console logs in the calling functions, and the onStart, or the make up of the timeline (from what I can see)

Deleted 4 items (fine), Added 3 that all flashed, then Added that didn't. Output all the same. All in the same order. Am stumped 😟

*might try and output the progress as it looks like it restarts the animation 🤷‍♂️ (also will have to look up onUpdate :))

Link to comment
Share on other sites

Yeah, sorry, but we can't do much without a minimal demo

Link to comment
Share on other sites

Yeah, I know, I just can't see an easy way to replicate this problem in a minimal demo 😕. I'll give it some thought.

Still confusing as hell though - I used onUpdate to count each frame of the animation, and they're all within 3 frames of each other, regardless of whether they work or not.

either way, thanks for your input!

  • Like 1
Link to comment
Share on other sites

If there's no difference in the console logs in the function and the timeline then you're likely calling the function multiple times? Are you sure that's not what's happening. That would be my main guess. Something wrong in your JS logic elsewhere, not the animation itself.

Link to comment
Share on other sites

44 minutes ago, Cassie said:

If there's no difference in the console logs in the function and the timeline then you're likely calling the function multiple times? Are you sure that's not what's happening. That would be my main guess. Something wrong in your JS logic elsewhere, not the animation itself.

The console log is literally just before the call to .play(0), so I don't think it's that? Thought that was what you were asking me to test tbh!

I've a sneaking suspicion it's much simpler than that, and that I've just made another silly error - I've just removed the animate out part of the alert animation, and the problem went away. Put it back in, and the problem is back again, straight away.

So at the (very high) risk of looking stupid, what's wrong with this:

 

export const getAlertAnimation = (alertWrapper, paused) => {
    
    const tl = gsap.timeline({paused: paused})
    return tl
        .fromTo(alertWrapper, 
            { autoAlpha: 0 },
            { 
                autoAlpha: 1, 
                duration: 1
            }
        )
        .fromTo(alertWrapper,
            { autoAlpha: 1 },
            {
                autoAlpha: 0,
                duration: 1,
        }, '+=1')
}

Specifically, why can't I have the duration of the first animation be 1 second? That makes it stutter, .5 doesn't.
Removing the second animation, as mentioned, also seems to remove the sutter. 🤷‍♂️

I mean it's kind of irrelevant as I only set the durations to 1 second to make everything more obvious it was animating correctly when I was testing, but am still definitely interested

 

Link to comment
Share on other sites

Remember that by default, .fromTo() and .from() tweens have immediateRender: true, thus in your example, the autoAlpha will be 1 until that first tween's playhead starts moving. 

 

In other words...

.fromTo(... {autoAlpha: 0}, {autoAlpha: 1}) // <- immediately sets opacity to 0
.fromTo(... {autoAlpha: 1}, {autoAlpha: 0}) // <- immediately sets opacity to 1!

Thus before anything starts running, opacity is at 1! 

 

So you've got 3 options:

  1. Just use a .to() for your 2nd tween. There's really no need to use a .fromTo() there from what I can tell - you're already controlling the value with the earlier tween
  2. Set immediateRender: false on the 2nd one so that it doesn't force it to render at opacity: 1 initially. 
  3. Or force the immediate state by calling tl.progress(1).progress(0) (jump the playhead to the end and then back to the very start which initializes everything and sets the values the way they'd be at the start of the timeline)

More info:

 

  • Like 2
Link to comment
Share on other sites

6 minutes ago, GreenSock said:

Remember that by default, .fromTo() and .from() tweens have immediateRender: true, thus in your example, the autoAlpha will be 1 until that first tween's playhead starts moving. 

 

In other words...

.fromTo(... {autoAlpha: 0}, {autoAlpha: 1}) // <- immediately sets opacity to 0
.fromTo(... {autoAlpha: 1}, {autoAlpha: 0}) // <- immediately sets opacity to 1!

Thus before anything starts running, opacity is at 1! 

 

So you've got 3 options:

  1. Just use a .to() for your 2nd tween. There's really no need to use a .fromTo() there from what I can tell - you're already controlling the value with the earlier tween
  2. Set immediateRender: false on the 2nd one so that it doesn't force it to render at opacity: 1 initially. 
  3. Or force the immediate state by calling tl.progress(1).progress(0) (jump the playhead to the end and then back to the very start which initializes everything and sets the values the way they'd be at the start of the timeline)

More info:

 


That's initially what I thought it was:

 

20 hours ago, NickWoodward said:

I thought it kind of looked like an issue with immediate rendering with a fromTo?


but it seemd to make no difference? Perhaps I hadn't saved that module before testing, or wrote it wrong. It has been known before! 😄

I am a little confused though as to why it would be intermittent? Or why it was also fixed by changing the duration of the first of the two tweens?

Either way, it seems to be working now, so thanks!

Link to comment
Share on other sites

23 minutes ago, Cassie said:

Here's a demo! 
 

Appreciate it! Definitely thought I'd done that several times though 🙃 Still find it a bit strange it was intermittent though?

Anyway, the only positive take away is that I'm making way less mistakes than I used to... Ran into a problem a few days back that I faced 3 months ago (that took me a good few days of annoying OSUblake to get my head around) which I fixed in about an 20 minutes... One day I'll have this animation thing sorted 😄.

I should really pump a bit more time into Carl's course now I'm a bit better at it...

Anyway, thanks again!

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