Swipe Actions

Brendan Fagan

Open in Framer X

About

A simple component which you can use in your gesture-based prototypes. It allows you to quickly create a drag to reveal micro-interaction for any Frame on your canvas. That frame will automatically become draggable, with snapping dynamic to your amount and width of your actions.


Instructions

  1. Drag component onto canvas
  2. Customise your animation values
  3. Set your desired action amount, icons, and colors
  4. Link to the frame you’d like to have slide on top
  5. Resize and adjust to your heart’s content

Property Controls

Property Output
Top Frame Attach to the frame you want to be draggable
Animation Set type of animation for the draggable frame
Duration Animation duration if ease
Stiffness Spring stiffness if spring
Damping Spring damping if spring
Actions Amount of actions (up to three)
Icon Shape Choose full or ellipses
Alignment Left or right of the row
Icon Spacing Spacing between ellipses icons
Action Width Adjusts width for all actions
Icon Size Adjust size of icons
Action Color Change color of the icon’s container

Coming soon

  1. Toggle labels with or without icons
  2. More icon sets
  3. Custom icon uploads
Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree