How can I create multiple mouse click interactions on the same element in Webflow?

You can create multiple mouse click interactions on a single element in Webflow by using a single click trigger and configuring multiple actions based on Click 1 and Click 2. Webflow supports two click states per element.

​

1. Add a Mouse Click (Tap) Trigger

​

• Select the element you want to apply the click interactions to.
• Go to the Interactions panel (lightning icon).
• Click + next to Element Trigger and choose Mouse Click (Tap).

2. Configure Click 1 Actions

​

• Under Click 1, add the first set of animations (e.g. open menu, show content, start animation).
• You can add multiple actions such as element transforms, opacity changes, or applying interaction presets.

​

3. Configure Click 2 Actions

​

• Use Click 2 to define the second set of actions for when the same element is clicked again.
• This usually functions as a “toggle” (e.g. close the opened menu or reverse the animation).

​

4. Chain or Sequence Actions

​

• Within each click state, you can chain multiple actions using delays and easing to control timing.
• Use “Affect different elements” under action settings to control other elements via this one interaction.

​

5. For More Than Two States (Workaround)

​

Webflow natively supports two click states only. To manage more than two behaviors:

​

• Use custom states via classes or attributes combined with multiple elements or custom code for added logic.
• Or, duplicate the element, make one visible at a time, and switch interactions between them (not ideal but works in limited use cases).

​

Summary

​

You can apply two separate interaction sets to a single element in Webflow using the click/tap trigger, dividing them under Click 1 and Click 2. For more than two states, you’ll need to implement workarounds like class toggling or JavaScript.