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.
- 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 Screen layer.
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.
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.
Language Changes
We added a handy shortcut to make writing Events shorter and easier.
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.
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.
