In the process of doing my upgrade to Remix from Next.js, I realized that none of my animations were working. I'd been using react-animation-on-scroll to do that.

Well, of course it was because of how the page is rendered on the server first and then hydrated on the client later, right? So why even bother considering other options?

So, I read and read... hours of pondering and reading source code... tracing events... what could be causing it? Everything seemed to be working fine.

But then Github issues pointed to the fact that this library didn't seem to be working right with React 18, and I'd upgraded that, too, while I was at it. AH HAH!

So, OF COURSE it was that. So, I downgrade to 17... and... it still doesn't work. It's gotta be some obscure error that no one else ever in the course of human history has seen, and that's why I can't find anything about it.

Right?

...

So... um... fine... <goes back to read the npm package docs...>

And maybe a third of the way down the page (in bold, no less):

Please be sure to include animate.css (version 4 and higher) in someway in your project.

Oh... Ah, right, Remix does that a little different, so I'd just pulled out the link to the stylesheet that I had in the Next.js version. (facepalm emoji goes here)

Added the stylesheet to the collection:

export const links = () => {
  return [
  { rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" },
  { rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&display=swap" },
  { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" }]
}

to the root.tsx file, and whattdya know?

Works now.

Moral of this story: "Don't be so focused on how sure you are that you skip over the part where you make sure you did all the basic stuff."