bendc
commented
6 years ago Thank you Thibaut!
In Safari (version 11.1), the shape is completely blurred until it fully stops.
I double-checked and it seems like a repaint bug in Safari (that I reported) since the code is doing the right thing (the blur is at 0 for both x and y at the end of the animation).
In Chrome (version 66.0), it is not smooth at all until the shape had gone back and forth 3-4 times.
AFAICT the code is as optimized as possible, so I'm afraid I can't do much about it as it's really hardware and browser dependant (e.g. you might not be able to replicate it after refreshing the page or in another browser like Firefox). That being said, please note animating a directional blur is a fairly expensive operation, so it might not always perform smoothly depending on your code and setup.
Hi @bendc,
I noticed a few quirks when previewing your "blur" example.
In Safari (version
11.1), the shape is completely blurred until it fully stops. I mean, blur seems to be applied on both axes while the motion happens on the x axis only. And it's very noticeable. The attached capture shows how it looks when it goes back to the left (snapshot taken just before it pauses).In Chrome (version
66.0), it is not smooth at all until the shape had gone back and forth 3-4 times.Maybe these issues are tight to the lack of performance of my mid-2012 MacBook Air (and I can't test on my 5K iMac for now).