Skip to main content
9mo ago

Performance on website degrades with large canvas size – Is This Normal?

Hey community

I'm having a weird encounter regarding the performance when I implement the animation on my website. Maybe someone can help me here.

The goal:

I am trying to implement a large rive animation on a website and currently I am trying to fix performance issues.
At the end the animation should fill the whole screen and the user can scroll sideways. The animation consists of a background image and 20 animations that are triggered when hovering over them.

Now, in the process of fixing performance issues I deleted almost all the objects in rive so I can test it better. In rive, my test file looks like this:

You can see that the artboard is still large, but I deleted all but two of the objects/animations.

The problem:

Now I had the weird encounter that when I crop the rive canvas on my website to the size of my browser window, the performance is just fine:

But when I dont crop it and let the user scroll sideways, the performance is much worse:

What I think is weird is that the part of the canvas that is either hidden or visible has no object or animation on it. Its just a blank space.

Is this normal?

Can anyone confirm if this is normal with rive animations? And is there a way to go around this problem?

And: Do you have tips on how to optimize performance when implementing rive animations on websites?

1 reply
(edited) 9mo ago

Very cool designs! I'm excited to see this animated.

Yes, a canvas that big will definitely cause your users issues, whether you're using Rive or not.

You can actually pass your scroll position into Rive using inputs. That way you don't have to actually scroll a giant canvas. Here's a good example of this in action: https://riveflow.webflow.io/examples-2/scroll-based-animation.

In your case it'll be a little different because you don't want to show the up and down scrolling. Here's what I'd do differently:

  1. Have a blank page that's 2000px or however tall. This'll allow you to capture the scrollHeight

  2. Put your Rive animation in a fixed position at the top of and filling the screen so you can't see the scrollable part of the page.