Skip to main content
Question

Why does the overlay not support smart animation?

  • August 29, 2023
  • 2 replies
  • 341 views

riversliang

Figma is the best tool, but I think it have something to do better to make a nice portotype
I don’t understand why the overflay not support smart animation?
another question is when I use overlay Nav to another page, I can’t go back the overlay,
I feeling so crazy…

This topic has been closed for replies.

2 replies

JP_Bantigue
  • 2 replies
  • July 3, 2024

I agree. I hope overlay supports smart animation soon!


Matias_Pietila
  • New Member
  • 1 reply
  • February 22, 2025

Something I have done is to combine overlays and smart animation like this:

 

1. Create a component with the two states you want to animate between

2. Trigger the animation between the component variants to happen with the delay of 1 ms and use Smart animation

3. Place the componen in a frame that you open as an overlay. Now you have combined overlay and smart animation

 

The nasty part is that you can't easilu reset the componen to the initial state because it keeps coming back due to the timer interaction. You can solve this with a variable.

 

1. Create a string variable e.g. overlayStatus and set it to match the name of your initial state in the component.

2. In the overlay frame, attach the variant of the component to the variable name.

3. In any of the buttons that close your overlay, add an interaction that sets the variable back to the initial state. This way the animation will be reset and work properly the next time you open the overlay.

 

Disadvantages of the solution:

 

- Requires extra effort and is easy to break

- Figma has a slight delay when rendering the results so it's not as smooth as the basic overlay animation