search

tisho / Switch.framerfx

Utility component for Framer X that lets you switch between different states of an element
31 stars 4 forks source link

Text and Graphics flickering with Auto-Animate #7

Open bise1157 opened 4 years ago

bise1157 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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.