OJS trigger update ordering bug causes flashes

[declann]

Hi,

There are noticeable flashes scrolling quickly through the OJS Variables example. I experience them in my own drafty example that uses OJS trigger values.

Screencast.from.2024-11-15.18-56-41.webm

The flases are caused by the trigger index incrementing before 0izing progress. So you get index A progress 100% then index B progress 100% then index B progress 0%: the middle change causes the flash.

Here I show the same issue scrolling up/down the OJS Variables example:

Screencast.from.2024-11-15.19-03-03.webm

Hopefully this isn't a tricky fix - So far I like the design of this a lot!

Thanks!

Declan

[andrewpbray]

Good spot @declann . I think this is the same issue that we noticed a few months back:

#40 (comment)

I'm looking at the second globe that shows up in our gallery example, though, and I see the same flashing behavior. @jimjam-slam any idea what's up?

[jimjam-slam]

@andrewpbray It looks like our second globe still uses my old trigger block-based maths. We should probably convert it over to a progress block too! I wonder if we should make some tweaks to our docs to push progress blocks a bit harder for the situations in which they're helpful.

@declann, give a progress block a try. It lets you track progress over several triggers at once, so you don't have to juggle events and potentially hit this event race problem. Let us know how you go!

[declann]

Thanks @andrewpbray - progress block does work!

However, I amn't trying to control a single animation across many triggers - each trigger is for a separate animation, so I must track trigger index too.

The mapping of crTriggerIndex+crTriggerProgress to a d3 scale as in the second globe is particularly elegant for what I'm trying to do!

Using progress blocks, I think I can get the effect I need with just a little different logic (a division).

But also, a workaround for the event race might be to conditionally subtract one in crTriggerIndex+crTriggerProgress 🤔

I know I have a few options to try, so I will report back on what works for me soon - thanks!

edit: Now I'm setting progress = crTriggerIndex+crTriggerProgress-(crTriggerProgress>0.99999?1:0)+(crTriggerProgress<0.00001?1:0) and using progress in my scales as in second globe example. So far no jank on this formula

[jimjam-slam]

I reckon it might be good for us to add a warning to the end of our OJS demo not to rely on the timing of crTriggerIndex and crTriggerProgress for continuous animations!

[declann]

This fudge I am using:

edit: Now I'm setting progress = crTriggerIndex+crTriggerProgress-(crTriggerProgress>0.99999?1:0)+(crTriggerProgress<0.00001?1:0) and using progress in my scales as in second globe example. So far no jank on this formula

Works pretty well! It's not perfect: somehow I had the flash problem once or twice in my testing. It's usually perfectly smooth. (but I'll be more confident when I finish my animation)

I guess it's also possible to massage conditional updates of trigger index/progress into closeread.js or just define a new progress variable for smooth animations across triggers

Just calling out the issue also works - it's up to you!