Hey community
I’m having a weird encounter regarding the performance when I implement a Rive animation on my website. Maybe someone can help me here.
The goal:
I am trying to implement a large rive animation on my project (with the new Rive element) 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 large rive animations on websites?
Links to the two sites:
My read-only link:
Rive – 2 Animations: CROPPED