hey there,
I can’t figure out how to animate this Button, I want to animate it like this
Solved
Animating Button Hover?
Best answer by tank666
I suggest that you change the structure of the component to remove the boolean operation from it, because smart animation may not behave as intended.
This is what the component should look like:
Button // (auto layout frame)
Overlay // (an absolutely positioned frame with the Clip content property checked)
Text // (with the component's text property applied)
Text // (with the component's text property applied)
At the Button level, add the background color that should be on hover. Also add a fill to the text that will be visible on hover.
At the Overlay level, add a color that overlays the background (i.e. visible on the button at rest). Add a fill to the text inside the overlay that will be visible at rest.
Now you can add a variant to the component set that will only need to change the height of the Overlay layer. Add an interaction and set your desired animation.
You can see an example file here:
Figma – 31 Mar 23This topic has been closed for comments
Unfortunately there’s no way to do that with Figma. Assuming that you’ve created the button as a component set, the only option you have for transitioning between states is Smart Animate, and you can only control its easing, not its start/end positions.
If you’re mocking this up for devs, a solution might be to make the animation a gif and embed that in the file for their reference. Or just straight up say “I want this to animate up from the bottom at X speed with Y easing.”
Well My intention wasn’t about mocking this to devs but actually asking the question on how to do this.
Is there any other way to animate such things?
I sent it as link because I can’t upload files since I am new to forums.
In Figma, no.
What specifically are you having difficulty with?
Animating ease from Bottom to Top.
Ok, Thanks for your help.
I suggest that you change the structure of the component to remove the boolean operation from it, because smart animation may not behave as intended.
This is what the component should look like:
Button // (auto layout frame)
Overlay // (an absolutely positioned frame with the Clip content property checked)
Text // (with the component's text property applied)
Text // (with the component's text property applied)
At the Button level, add the background color that should be on hover. Also add a fill to the text that will be visible on hover.
At the Overlay level, add a color that overlays the background (i.e. visible on the button at rest). Add a fill to the text inside the overlay that will be visible at rest.
Now you can add a variant to the component set that will only need to change the height of the Overlay layer. Add an interaction and set your desired animation.
You can see an example file here:
Figma – 31 Mar 23Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.