TransitionLink/AniLink appears to make timers for setInterval and setTimeout faster

[karomancer]

Hey y'all!

I'm noticing some weird behavior. After I converted some of my Links to AniLinks, it seems as though the timers for setInterval and setTimeout go faster than before. I found that what was once 80ms before is now 30-35ms.

If you watch the splash screen on my site, you can see there's a byline that updates occupation/hobbies with multiple setTimeouts.

Before AniLink	After AniLink
See Before Live	See After live

Honestly it's hard to tell with the framerate of a gif, but it's actually very jarring.

This is what the commit with the change looked like.

Is there a known issue with sped up timers?

[TylerBarnes]

Interesting! 🤔 you're the first to report this actually 😅 This plugin uses wrappers around setTimeout and setInterval to make them use requestAnimationFrame so that transitions are more consistent. I think we'll need to import these wrappers with a different name in that case 🤔

See https://github.com/TylerBarnes/gatsby-plugin-transition-link/blob/d09fc98647a8721e3d64321cf41d96191b07261b/src/utils/triggerTransition.js#L2

[karomancer]

Ah! I was futzing around in the source to try to find the issue, but glossed right over that import.

we'll need to import these wrappers with a different name in that case

Are you suggesting there's a name collision, or what do you mean? I would imagine since it's local to that that file, there wouldn't be, but maybe when it's bundled it does some funky stuff. I'll play around in that file too and see what I can figure out.

Thanks for your very speedy reply!

[TylerBarnes]

Yeah I also would've thought there wouldn't be a problem there since it's being imported in those files and shouldn't be doing anything global, but there might be something funky going on. And perhaps the imported package is globally patching setInterval and setTimeout 😱 I hope not though haha.

[karomancer]

Well, if I look into triggerTransition.js code in node_modules, it looks like it's calling setTimeout on the requestanimationframe-timer library:

Do you have any thoughts on how to test? Or should I just update my timers to be 2x as long? 😂

The other weird thing to me is that the timers aren't consistently faster by the same margin; it seems to be variable. Normally I would say that might be influence by the p5 sketch file I have running on the page, but without AniLink I didn't have an issue before with inconsistent timing.

[karomancer]

I noticed that the timers only appear quick for a short period of time before reverting back to the correct time. I have two ideas:

• Could be related to the setTimeouts shown above in that after they are done, it resets
• Could be related to the preprocessing that Gatsby links do so that the transition is easy; does transition link or AniLink add to that as well? or does that just circle back to the above point?

[TylerBarnes]

It's hard to say but I don't think it'd be due to Gatsby Link. The most likely culprit is the request animation frame timer library. It might be that they patch setTimeout temporarily and then put it back after 🤔

[TylerBarnes]

I can't think of any other potential reasons unfortunately 😅

[karomancer]

No prob. Thanks for looking into it!

[karomancer]

I investigated more and still could not resolve the issue. I removed AniLink from my project and the issue resolved itself. Going to write my own transitions :)