Trouble with the animation (search bar) | Friends of Figma | Page 1

robust topaz Jul 29, 2023, 8:30 PM

#

Someone knows why this animation its horrible?

gray oak Jul 30, 2023, 3:47 AM

#

Hey @robust topaz ! Were you using ellipsis to make the circle and stuff? You might want to just use a frame / rectangle and have border radius on it (probably a frame though)

robust topaz Jul 30, 2023, 4:21 AM

#

I'm using auto layout

gray oak Jul 30, 2023, 4:37 AM

#

robust topaz I'm using auto layout

so is the outlined thing itself a frame already?

#

Could you show the layers for this?

robust topaz Jul 30, 2023, 4:40 AM

#

Yes. I've applied a stroke to this frame with rounded corners and I've created variants for it

gray oak Jul 30, 2023, 4:43 AM

#

robust topaz Yes. I've applied a stroke to this frame with rounded corners and I've created v...

Could you show the layers for these? and the animation setup?

#

oh okay i have been trying to replicate it now. It seems like when you are making it grow to the left it doesnt really wanna work out

robust topaz Jul 30, 2023, 1:53 PM

#

Do you have it same problem ? @gray oak

peak beacon Jul 30, 2023, 3:15 PM

#

Animations relies heavily on layers and names of elements - could you share some more information, or copy paste the component to a file you can share?

gray oak Jul 30, 2023, 3:28 PM

#

@robust topaz @peak beacon i actually could recreate the problem and it doesnt seem to be a layer problem exactly. To recreate it:

Make a frame with 100px border radius and have like a number 1 in it. Also add a stroke on it. And have autolayout on it to and make it hug the number. - like a number in a circle. Have the position of the number to be on the left (with autolayout) this is more important for step 4
Put this into another frame (like a bigger one). Do it in a way that the cirlce one is on the right of this rectangle frame.
Copy paste the result from 2
Drag the left side of the circle more to the left to stretch it out.
Combine them as component variants
Set up change to from one to another with smart animation
Make another frame and put in one of the variations
Preview this frame and see the problem

The reason why you need to put the circle frame into a bigger one is because as default, in figma it would grow to the right and not to the left. With that, this works well and doesnt look weird. It seems like when it needs to grow to the left (with this setup) it kinda breaks the animation and doesnt work well. But this feels more like a bug or figma limitation

#

I hope sometime they would make <- for autolayout too and not just ->

#Trouble with the animation (search bar)