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!
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
command key will allow you to hold and pan layers. This also works when you share your prototypes.
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.
- Pinch - Rotate and scale.
- Pan - Pan vertically.
- Swipe - Swiping velocity.
- EdgeSwipe - Swipe the left and right edges.
- DoubleTap - Tap twice, fast.
- ForceTap - Pressure sensitive tap.
- LongPress - Tap and hold.
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
# Listen to an edge swipe on ScreenScreenon EventsEdgeSwipeTop->...
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 =# Check the force valuelayerAon EventsForceTapprint eventforce
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 =# Enable pinching & panninglayerA.pinchable.enabled = truelayerA.draggable.enabled = true
We added a handy shortcut to make writing Events shorter and easier.
# Current click eventlayerAon EventsClick-> ...# With a shortcutlayerAonClick -> ...
The property names for
subLayers now use slightly friendlier names,
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 =layerB =# The old waylayerB.superLayer = layerAprint layerAsubLayers# The new waylayerB.parent = layerAprint layerAchildren
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.
- 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
- 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.