Skip to main content
Question

Multiple interactions on one click trigger

  • October 7, 2022
  • 3 replies
  • 15043 views
Cyber_Ninja

Hello, I’m new to Figma prototyping, transitioning over from Axure / Sketch / XD.

I’m creating a prototype and having a bit of difficulty with the interactions - multiple YouTube videos haven’t seemed to show me what to do with components, variants, interactive components etc.

Hoping you kind souls might point me in the right direction.

I’m looking to trigger multiple interactions and animations on one click (hamburger icon).

It seems that we’re limited to one OnClick event per component or group and I’m looking for a workaround to do the ollowing:

When hamburger menu is clicked

1a. Hamburger icon animates shifting to Close X icon

1b. Header bar remains in a fixed position - no transitions aside from the hamburger / X animation

  1. Menu slides in from left to right.

  2. The menu pushes the page content to the right. A small portion of the main page remains visible to the right of the screen

  3. As the menu push animation happens, the page content darkens under an overlay of 85% opacity

  4. When close icon is clicked, reverse the animations to close the menu & page content brightens, slides in from right to left.

https://i.imgur.com/djkdFkC.png

Could you please help? Thanks in advance 🙂

This topic has been closed for comments

3 replies

Dennis_N
  • Dennis_N
  • Power Member
  • 183 replies
  • October 7, 2022

Hi Cyber Ninja,

welcome to figma 🙂

The case you described can be achieved by using “smart animate”.

You will need both screens you showed and then animate from one to the other by giving your burger icon an on click event with “navigate to” → “open menu” and an “smart animate” transition with an ease.

image

Figma automatically will animate all elements from A to B. This contains, position, colors, etc.

The important part is that you have alle emelents you want to animate in both frames. Your menu for example also needs to be within your first (closed menu) frame. Left from your content, outside the visible area. Your outer frame acts as a mask. In your closed frame you can now move the menu in and push the content out by changing X cordinates.
This greyed out overlay effect you also need to create by hand. In my example I changed the background to blue and reduced opacity of my content frame so the background shines through. You could also use a colored frame as real overlay instead. This frame you could also link back, so your menu closes if you are clicking on this greyed out area.

Should look like this then:

image

Please make sure both frames have the same structure, so figma knows how to animate your different elements.

With this “clip content” checkbox you can turn on or off the “mask”, if you want to hide everything outside your frame.
image

An easier way would be using the overlay feature but it wouldn’t look exactly like your vision. The good thing is that it comes with this greyed out effect and move in animation out of the box.

image

Cyber_Ninja

Hi Dennis, thanks for the detailed instructions. I got this working with a mock menu. Now attempting to add a few more complex interactions within the menu itself. Really appreciate your fast assistance!

A
  • Anonymous
  • 0 replies
  • November 8, 2022

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings

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