Pinch, pan and press with new multi-touch gestures

February 04, 2016

Multi-touch gestures are everywhere. They're the intuitive mechanisms we use to unlock our phone, browse apps or edit photos. We're accustomed to multi-touch because it feels just right. Starting today, designing it does too.

Today's release brings advanced gesture events to Framer. Events are used to listen to interactivity in your prototype, like a simple click or drag. We've added all kinds of events so you can pinch, rotate, swipe and much more.

And that's not all — there's a ton of powerful new touch events, allowing you to use long presses, force touch, double taps and edge swipes. Let's have a look at what's new!

Multi-Touch Simulation

We've added multi-touch simulation directly within Framer Studio. Simply hold the alt key while moving your cursor, and you'll see a second cursor appear, representing your fingers. You can now pinch and rotate layers as you would on your device. Simultaneously holding the alt and command key will allow you to hold and pan layers. This also works when you share your prototypes.

Gesture Events

To help you get started with gesture-based interactions, we've prepared a set of simple examples. You can open them right into Framer Studio and start experimenting. These are great to study the inner workings of multi-touch gestures and get familiar with all of the new possibilities.

If you've used Framer before, the new syntax will feel very familiar. Here's how you listen to an EdgeSwipe from the top of the screen. All of the included edge swipe events can be used on the Screen layer.

# Listen to an edge swipe on Screen 
Screen.on Events.EdgeSwipeTop->

Each gesture event now receives a set of new properties — such as velocity, offset, time and more. So when you prototype a ForceTap, Framer will detect the pressure sensitivity of a touch. See a full list of all the new properties.

layerA = new Layer
# Check the force value 
layerA.on Events.ForceTap(event) ->
    print event.force

View Prototype

Pinchable Layers

We've included much of the default mobile behavior, like scaling, zooming and panning into a new property called pinchable. It responds to two fingers and you can enable it with a single line of code. The panning interaction relies on the draggable property. If you enable both properties, your pinchable layers can be panned with two fingers as well.

layerA = new Layer
# Enable pinching & panning 
layerA.pinchable.enabled = true
layerA.draggable.enabled = true

View the prototype

Language Changes

We added a handy shortcut to make writing Events shorter and easier.

# Current click event 
layerA.on Events.Click-> ...
# With a shortcut 
layerA.onClick -> ...

The property names for superLayer and subLayers now use slightly friendlier names, parent and children. These are a bit more intuitive and easier to understand. The previous property names will continue to work as well, but these will be the preferred names moving forward.

layerA = new Layer
layerB = new Layer
# The old way 
layerB.superLayer = layerA
print layerA.subLayers
# The new way 
layerB.parent = layerA
print layerA.children

3D Improvements

Perspective is now enabled by default. It gives depth to properties such as rotationX and rotationY, allowing you to design and animate in 3D space. We've also added the originZ property to layers. It allows you to create advanced 3D prototypes, like card flips or carousels.

More Updates

  • New SliderComponent properties: hitArea, knob.constraints and more.
  • We now separate scroll events from click events.
  • Improved animation performance.
  • Improved performance of cleaning up event binding.
  • Get a list of current layers with Framer.CurrentContext.layers.
  • Invisible characters (like tabs and spaces) are now shown by default.

Huge thanks to Javier Chávarri and Niels van Hoorn for their contributions to the new multi-touch gestures and 3D improvements. You can download Framer Studio or launch the app to update. We'd love to hear your feedback on Twitter or our Facebook community.