How to have various components animated differently within a frame?

Ask the community
1

Hello,I am new to Figma and in my mockup on transition after clicking “add a new bill” I would like the form to slide in but the navigation arrow and “x” icon to just appear without animation. The closest I managed to get to the desired state was using the option “smart animate matching layers” but top navigation icons still move in. Any way to have different items be animated in a different way?

image
image707×809 54.9 KB

1 Like
2

Hi @Jerzy_Grzelak

Figma does not let us manage different animation on different elements in the same frame.
A work around woud be to have 3 frames to do your animation:

  1. first frame is your Landing page, nothing change. Clicking on “+ Add a new bill” will slide your 2nd frame above the actual on
  2. Second frame is the same as Add new bill frame without the < and x icon. This frame is only here for doing the transition. Select the frame and add an animation with the triggering method: after delay set to 1ms. It means that after a millisecond, this frame will trigger the new animation to the next frame.
  3. The last frame is your actual Add new bill as display above on your message. So you can manage to make the < and x icon appears in a millisecond without any motion.

Let me know if it helps (:

3

@Haroll, worked like a charm, thank you very much!

1 Like