Skip to main content
E
Erembodegem
Inspiring
March 7, 2021
Question

Export HTML5 - high GPU usage when viewing HTML in browser

  • March 7, 2021
  • 1 reply
  • 476 views

I want to export my graphic design/animation from Adobe Animate to HTML5 canvas.
I'm a graphic designer and not a webdeveloper or coder.

 

I have noticed that when I export my graphic design to HTML5 in Animate, when viewing in the webbrowser, I see that it draws a lot of Power from the GPU.

 

I'm making something for a website where you see an animation when entering the website and then the final frame is a still frame and is kept on the screen. At the moment that still frame keeps drawing power from the GPU, and i don't understand why.

 

So i did some testing. I took a simple bitmap image (1920x1080) put it onto a HTML5 canvas (25fps) in Animate and exported that as a HTML5 without any animations.

I noticed that even though it is a still frame, it keeps drawing power from the GPU (+/- 10%).
When Changing the 25 fps to 1 fps, I noticed a drop to 1% GPU usage.

 

So this probably means that even though it is a still frame, HTML5 sees it as an animation?
Is that something that I can change in Animate without any coding?

 

 

    This topic has been closed for replies.

    1 reply

    C
    ClayUUID
    Legend
    March 7, 2021

    Animate redraws the entire stage every frame.

    E
    ErembodegemAuthor
    Inspiring
    March 7, 2021

    Yes I understand. What I don't understand is why a still image that is just one frame keeps beeing redrawn.

    My understanding of HTML is very limited, there are probably other and better ways to incorporate animations in HTML5 then use Animate?

    Colin Holgate
    Colin Holgate
    Inspiring
    March 7, 2021

    I don't know of the reason that Canvas has to redraw itself even if nothing has changed, but as a work around to your example, this should help:

    createjs.Ticker.framerate = 1;

    You could set the frame rate to be 1 fps, while you are lingering on a static image, and then change it to something faster if you need to animate something. 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices