Text and Graphics flickering with Auto-Animate

[bise1157]

Hi,

when having text or graphics in a frame, auto-animate makes these elements flicker (even if they do not change on the connected frames/artboards). This does not happen with frames. You can see this in your chart slideshow example with the "March" element.

Is there an easy fix for this?
Thanks!
Ben

[tisho]

Hi Ben, thanks for reporting this.

The flicker is caused by cross-fading between two elements when switching states. Since text and graphics can't smoothly be animated from one state to the other like Frames can, Switch does a magic trick by fading out one element and fading in the other on top of it. When those elements happen to be the same, this fading out / fading in trick can sometimes look like a flicker, because in the middle of the animation both elements drop to less than 100% combined opacity. Switch tries to work around this by animating opacity on a different curve than the rest of the animation, so elements can spend more time at close to full opacity. This, however, isn't possible when using a physics-based transition like a spring, so you'll see that with springs the effect is exacerbated.

One way to reduce flicker is to pick a Tween transition, instead of a Spring, and potentially slow it down a bit.

I'll continue looking into ways to reduce this effect. In the meantime, you can help me by sending in examples where this looks noticeably bad, so I have enough test cases to try out fixes on.

[bise1157]

Hey, thanks for the explanation. I will send you an example later. For elements that never should be animated, i will probably just put them into another frame. Another option could be to prefix them with a special character, so switch could exclude them from the animation.
This wouldn't solve the issue for multi step animations, that have some keyframes for an element being the same, though...

[tisho]

I released v1.16.0 today. I fixed the flicker on first render and updated the opacity curve even for spring transitions in order to further reduce perceptible flicker. Give it a go and let me know if it makes things better.

Re: excluding elements from the animation, I've been thinking of supporting something like a "(sticky)" suffix on layer names, which would indicate that you don't want a layer to be animated between states. The way things are implemented, however, it wouldn't be a straightforward addition, so I want to understand more about potential use cases before I figure out how to approach the problem.