Hi! I’m not sure if this is a current limitation or intended behaviour. But it would be really nice if you could Smart Animate when using Component Overrides.
For example, if I have a ‘Modal View’ component with a nested Progress Bar (using % as variants). While prototyping it will highlight both layers as if they’re going to animate.
You just have to make sure you have the same name everywhere (make the layers match), so that the system understands that it’s the same element that changes state. That’s the secret with the smart animate.
I’ve run into something similar with text changes … If a text layer name follows its content, Smart Animate won’t work for me as intended (a label I just want to change text gets pushed of the off the screen and replaced, for example), so I have to ensure to commonly ‘hard name’ all text layers that I don’t want effected by a transform.
I’m not sure how that works within an instance of a complex component, but I guess you’d just name whatever visible layer you’d want to show with a common name, as mentioned by Steven above
That’s the part that doesn’t seem to work when using Nested Components and overriding them. It will highlight both layers on the Editor (while using the same name), but it won’t animate between them. (Unless you detach everything)
Sure! As you can see from this video, both layers have the same name and match according to the editor, but Smart Animate only works when detaching the parent component.
As @Steven also mentioned, I think the names of your frames are different inside. Not just the parent but also the one with actual progress. Have you tried naming them all the same?
Thanks! Just a heads up: I am able to go to your Components file through this and duplicate it. Don’t worry, I won’t look but since this is a public forum, you might want to limit that.
I was able to get nested progress bars to work with Smart Animate using another hack (Using an Auto Layout gap). Apparently Smart Animate doesn’t support nested variant overrides, maybe due to how the naming works internally.
