Skip to main content
Solved

How to have various components animated differently within a frame?


Jerzy_Grzelak

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?

Best answer by Haroll

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 (:

View original
This topic has been closed for comments

Haroll
  • Active Member
  • May 2, 2022

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 (:


Jerzy_Grzelak

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings