Fade in hover effect in Figma

Designer Topics Figma
1

Hi everyone!
Could someone please explain to me how to apply the Fade In hover effect in Anima for Figma? I’ve been struggling with that the whole day today and failed, even though I’m sure it must be an easy thing. Unfortunately also the documentation doesn’t provide help with that.

The thing is I can’t figure out how to apply the initial state of an object before applying the Fade in effect. It seems that the object remains with 100% all the time. When I adjust the CSS transition parameter from 1 to, for example, 0.5 then it fades out from 100% to 50% as if ot was actually a fade out effect. Also setting up the Layer opacity in Figma to be 0% doesn’t help.

Is it a bug? What am I doing wrong?
Thank you in advance!

2

Hey @koloranek, thanks for writing!

Have you tried adding the ‘fade in’ effect as an entrance animation in the Anima plugin? You can set the duration of the transition as well as the before and after opacity from 0 to 100%

image
image570×1152 32.4 KB

It should do the trick!

3

Hi @Shira , thanks for your reply! Actually I did, but I need to achieve this effect on hover, so I guess entrance animation is not the cale here.

But getting back to hover effects - is this actually a bug or is there a specific setting that should be taken into accont when applying this effect?

4

Sorry I miss-understood, but the fade in setting should be the same for Hover as well. I’m not sure I understand the issue, could you send a screenshot and simple version of a Figma file that you’re trying to add this effect via Anima plugin and what’s going wrong? Thanks!

5

Hi Shira!
I found this tutorial to be usefull.

6

I think Figma is similar to sketch.

7

Thanks for sharing, happy to hear it! Did you manage to resolve your issue? What was the solution?

8

Hi Shira, rocketmonkey wasn’t the author of the issue :slight_smile:

Anyway, I sorted it out quite accidentally.

The Fade In effects panel looks as follows:

AnimaFadeIn-scrnsht
AnimaFadeIn-scrnsht1392×859 55.8 KB

I think that it would be much more intuitive if it included the “CSS Before Transition” option similarly as in the Entrance Animation you mentioned.

The problem was that I was setting the opacity of the overlay object (rectangle) that I want to fade in to 0%. In this case in the previel Anima sets its initial state to 1 and nothing happens. In order for the effect to work the opacity must be set to at least 1% (in the example above it’s set to 50%) which I think is not too intuitive, but at least that worked for me. Maybe it is a bug?

9

Hey @koloranek first of all sorry about that :see_no_evil:

And second of all, it’s a great point you rise and you found the perfect workaround but if this is something you’d like to see supported more intuitively by Anima, we’d appreciate if you could add it to our feature request board so our product team can know how to prioritize accordingly! Thanks and I’m glad it’s at least resolved for now :muscle:t2:

1 Like