How to reduce the CPU usage of this animation

Using JavaScript with Hype
1

Hello,

I found this animation use lots of CPU usage:

https://tumult.com/hype/gallery/jellyfish/jellyfish.hype.zip

and even cause the safari will reload the page, anyway to reduce the CPU usage please?

Thanks

2

reduce blurrings …

3

Hi @h_classen,

How is going?

Do you mean the background blurrings? Or the values in JavaScript?

Thanks

4

This brilliant hype animation simply pushes the possibilities of what is doable to its limits.
one of the most ‘expensive’ filter for animating is the blur filter …

5

If you go to each element and hit “Reset Filters to Default” it reduces the CPU usage from ~130% to ~80% on my machine.

I also tried changing the shape morph algorithm to Direct Anchor Point Match but that didn’t seem to matter much. You might be able to gain a few percent by not using flexible layout.

Ultimately a lot of animations are running, especially those with shape morphs that have to manipulate SVG.