Hi all –
I’m struggling with an issue with flickering in Safari. The same animation looks fine in Chrome and Firefox, but the images seem struggling to play the first time through in Safari, even in Preview mode. When the animation repeats, it looks just fine.
Any help on this topic would be appreciated.
Here’s the file for reference:
Thanks!
-Tom
Likely due to the size of the images (over 1000x1000) and that it is being scaled, it looks like Safari thinks that it cannot be initially rendered within a single frame and so take an extra frame to show the image. You may be able to crop/scale the images and achieve better results, but this isn’t guaranteed.
One fix that appears to work for me is that if you prime the image by having them start out with a display visible, and one frame later set them to hidden, you’ll wind up with them being pre-rendered and will display correctly. During this frame you could set the frames to 0% opacity and animate to 100% with an instant timing function or cover with a white rectangle to hide the prerender phase.
For that matter, you may also be able to achieve this working using the Opacity property and instant timing functions instead of the display.
The upcoming Hype v4 does have sprite sheet support that will solve this problem. It does not presently allow for different frame timings or positions like you have, but you’re welcome to join the beta.
Thanks. I’ll try priming the images. I’ll also try downsizing the graphics. This is my first animation project that I started in Affinity Designer, and apparently I don’t understand the export function as well as I do in Illustrator.