Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
2

HTML5 Canvas animation run slow on Chrome Mobile

Explorer ,
Feb 24, 2021 Feb 24, 2021

Hi everyone, on Chrome mobile browser, my animation suddenly drop its fps (normal it's 30fps, but on Chrome mobile, I think it's 1-2 fps, very lagging). The thing is it's only happened to some project, and it's working fine on Chrome windows and other browsers.

 

I have add this meta to header but it's still run slow:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />

 

I also run these scripts but not helpful:
https://helpx.adobe.com/animate/using/tip--html5-optimization.html

 

I also change all my tweens to classic tween (before that they are motion tweens) and remove every frames that aren't need. Not helpful.

 

My last resort would be change it to Bitmap instead of using Illustrator import. But that'll take a lot of efforts because these projects have many images.

 

Please, anyone, help me.

Link to my animation: https://angry-jones-e2ad12.netlify.app/

3.4K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 14, 2021 May 14, 2021

I have the same problem with my animations no matter how simple they are.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 30, 2021 May 30, 2021

 

your animation works smoothly on mobile Chrome for iOS (iphone 12 mini).

your issues are on Android I assume?
can u give info about what device / Android version etc...?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 15, 2021 Jun 15, 2021

Yes, it's lagging on Android Chrome. My device tests are various from Android 9, 10 such as Realme 5 Pro, Redmi Note 9, Samsung Galaxy A6, etc... The lower Android ver, the worse.

On iOS Chrome, it's less laggy, but low spec devices are not really smooth. It's just acceptable.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 21, 2022 Oct 21, 2022

Have you solved this problem?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 24, 2022 Oct 24, 2022

Hi.

 

By experience, what I can tell you is that you should experiment with the publish settings.

 

I worked in a project recently in which the performance on Android devices was just terrible and on iOS was better but still not ideal.

 

Tweaking the content helped (e.g.: removing big images, simplifying animations, and so on), but what really made the difference was to try out several publish profiles.

 

In this particular project setting the content to be exported as textures at 1x worked better for Android and exporting as lower resolution spritesheets was what worked for iOS.

 

I'm not saying it will solve everything, but it may help. It's just an workaround while we don't get GPU acceleration and other performance boosts for the HTML5 Canvas document.

 

Regards,

JC

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 24, 2022 Oct 24, 2022

Thank you sir, i will try these things

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 24, 2022 Oct 24, 2022

@Ashish26732465jjau,  rasters perform better than vectors in html5, but cause larger file size.  you can fine tune which assets are rasterized to get best balance of desired features.

 

kglad_1-1666624210444.png

 

 

kglad_0-1666624177102.png

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 24, 2022 Oct 24, 2022

Thank you sir

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 25, 2022 Oct 25, 2022

you're welcome.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 29, 2024 Feb 29, 2024

If I tilt my android device to landscape and then tilt it back to portrait, the animation runs smooth like desktop, everytime.
Is there a way to force this to happen behind the scene, quickly, where the user doesn't even see these flips?
link to canvas/app in production: https://lux55.com/HomeCheckPro/1/

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 29, 2024 Feb 29, 2024
LATEST

you should be able to use the same listeners and just dispatch the needed events with code.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines