1

I'm working on a new personal website. For the homepage header I made a soothing waves animation using the colors of my new theme.

Problem: this animation seems to be quite heavy and is jagged/stuttery on lower-end devices like mid-range smartphones and cheap laptops. Not a desirable effect for a homepage or any website for that matter.

Website

The animations are done by animation background-position on the wave elements and subtle movements with css transform animations (translate, rotate).

What I've tried so far:

  • turning the animation into a lightweight video. Problem: color reproduction across browsers is a mess. The green on the bottom and the blue on top needs to match up with the background of the page, which is impossible to do across all major browsers (I tried using css filters to correct the differences in color interpretation but unfortunately this also isn't satisfactory).
  • Using the will-change css property on the animating elements. This doesn't make a noticible difference but I still leave them in to be sure.
  • Using a javascript animation library to do the heavy animation lifting, but this produces a similarly heavy result.
  • Rendering the video to a html5 canvas. This still produces the same color misinterpretation.
  • Contemplating life and why the world in 2020 is still like this that there's no regulation on color reproduction between browsers and devices. This obviously did not produce a useable result.

Conclusion: I'm open to any input on making the animations be less recource-intensive, I'd prefer keeping the live-rendering version like it is now, but if there's a solution to the color interpretation issue in html5 I'll gladly switch to using that method as it tends to be the easiest on end-user resources.

Grabbels
  • 123
  • 1
  • 9
  • I like the *"Contempling life..."* a lot! ;) -- A suggestion you may not like is to check for device capability to animate or not. I found [this](https://stackoverflow.com/a/35889627/2159528). – Louys Patrice Bessette Dec 28 '20 at 23:05
  • @LouysPatriceBessette that might be good workaround if there's no proper solution at hand, thanks! I could disable the animations and serve up a static header on mobile devices. – Grabbels Dec 28 '20 at 23:09
  • There always will be poor devices... A fallback is a good solution even if you find a way to lighten the animation. – Louys Patrice Bessette Dec 28 '20 at 23:14
  • You may want to take a look at [greensock](https://greensock.com/) – Gerard Dec 28 '20 at 23:18
  • @Gerard: I thought about greensock too... It is really useful to create complex animations easilly. But I don't see how it can be lighter than simple `@keyframe` animations in term of device ressource. – Louys Patrice Bessette Dec 28 '20 at 23:24
  • I fiddled around with Greensock for a bit, but unfortunately the performance hit seems to be the same. – Grabbels Dec 29 '20 at 00:23
  • 1
    Update: to my suprise the animation is as good as buttery smooth in Chrome on my Pixel 3a. I have been testing in Firefox for Android which runs the animation at 10fps at best, but seeing that it's fine on Chrome I might as well drop this and keep it like it is, because this clearly seems to be an issue with Firefox for Android. – Grabbels Dec 29 '20 at 10:58

0 Answers0