Animations playing slow on Android browser
I have a few Rive animations on my website and they seem to be playing alright when I open the website on my Mac (Chrome) and iPhone (Safari) but they don't play smoothly and stutter on an older Android (Chrome) device. The site was designed in Webflow and they're controlled using triggers on scroll, is there any way to fix this?
Phones, especially older phones, won't be as powerful and might have a hard time running complex animations. Do you mind sharing the webpage URL or maybe the .rev so I can take a closer look and help you optimize?
Sure thing, where can I send you the .rev? We've got about 9 similar animations playing on one page. There isn't really a lot of complex stuff happening, but yeah, I think the number of animations being loaded at the same time might be the issue here
I've uploaded two files here. We're using the artboard named "Production" on the site since we needed to scale them up and I've also added a trigger to start playing the animation since our developer needed it to control when the animation started playing. Do you think any of these might be causing the slowness? Or is there any workaround for this?
I have the same issue, but mine is slow on Safari iOS while Edge iOS works just fine. Following.
No, I don't think that'd cause the slowness. It's possible that having all 9 running at once, even if some are offscreen, could slow things down. Which runtime are you using (JS, React, Flutter)? If you're using React, this should be managed automatically.