Swipe events
Panning more than 30 points is considered a swipe.
You can listen for ‘swipe’ gestures on any layer, but ‘edge swipe’ can only be used on the Screen
.
Swipe
Swipe events | |
---|---|
onSwipeStart | The user has panned on the layer for a distance of 30 points, in any direction. |
onSwipe ? | The user is still swiping. |
onSwipeEnd | End of the swiping (triggers together with onTapEnd ). |
The directional swipe events (left, right, up, down) on the next pages listen to the direction at the beginning of the gesture.
If you want to track a change of direction during the gesture, you’ll be better off using the standard swipe events (above) and retrieving the current direction using the offsetDirection
or deltaDirection
event properties.
Swipe left events | |
---|---|
onSwipeLeftStart | Like onSwipeStart , but only called when swiping left. |
onSwipeLeft ? | Called after a onSwipeLeftStart (irrespective of the current direction). |
onSwipeLeftEnd | End of the swiping gesture which started off going left. |
Swipe right events | |
---|---|
onSwipeRightStart | Like onSwipeStart , but only called when swiping right. |
onSwipeRight ? | Called after a onSwipeRightStart (irrespective of the current direction). |
onSwipeRightEnd | End of the swiping gesture which started off going right. |
Swipe up events | |
---|---|
onSwipeUpStart | Like onSwipeStart , but only called when swiping upwards. |
onSwipeUp ? | Called after a onSwipeUpStart (irrespective of the current direction). |
onSwipeUpEnd | End of the swiping gesture which started off going up. |
Swipe down events | |
---|---|
onSwipeDownStart | Like onSwipeStart , but only called when swiping downwards. |
onSwipeDown ? | Called after a onSwipeDownStart (irrespective of the current direction). |
onSwipeDownEnd | End of the swiping gesture which started off going down. |
Swipe example
In the following example these events are used:
onSwipeLeftStart
rotates the layer 20º around the y-axisonSwipeRightStart
rotates the layer 20º around the y-axis (in the opposite direction)onSwipeDownStart
rotates the layer 20º around the x-axisonSwipeUpStart
rotates the layer 20º around the x-axis (in the opposite direction)onSwipe
repositions the layer continuously, like if it was a draggable layeronSwipeEnd
looks at theevent.velocity
and will animate the layer off-screen if the speed is high enough. Otherwise it’ll snap the layer back
layerA.onSwipeLeftStart ->
layerA.animate
rotationY: 20
layerA.onSwipeRightStart ->
layerA.animate
rotationY: -20
# …and similar for vertical swipes
layerA.onSwipe ->
this.x = this.x + event.delta.x
this.y = this.y + event.delta.y
layerA.onSwipeEnd ->
if event.velocity.x > 4
layerA.animate
x: Screen.width + 100
Utils.delay 0.2, ->
layerA.maxX = -100
setInitialPosition()
else if event.velocity.x < -4
layerA.animate
maxX: - 100
Utils.delay 0.2, ->
layerA.x = Screen.width + 100
setInitialPosition()
# …and the same for vertical swipes
else
setInitialPosition()
Swipe example
Overview of the swipe events
Edge swipe
You will not find these events behind the Event button because they cannot be attached to a layer. Instead, you have to attach them to the Screen object.
Screen.onEdgeSwipeStart ->
# do stuff
Quick tip: To attach any other event to the screen, use Framer.Device.screen
, like this:
Framer.Device.screen.onTap ->
# do something when tapped
# anywhere on the screen
Edge swipe events | |
---|---|
onEdgeSwipeStart | Start of a swipe from any edge of the screen. |
onEdgeSwipe ? | Still swiping. |
onEdgeSwipeEnd | End of the swipe gesture. |
There are also separate events for any of the screen’s edges: Left, Right, Top, and Bottom.
Edge swipe left events | |
---|---|
onEdgeSwipeLeftStart | Start of a swipe from the left edge of the screen. |
onEdgeSwipeLeft ? | Called after an onEdgeSwipeLeftStart (irrespective of the current direction). |
onEdgeSwipeLeftEnd | End of the swipe gesture. |
Edge swipe right events | |
---|---|
onEdgeSwipeRightStart | Start of a swipe from the right edge of the screen. |
onEdgeSwipeRight ? | Called after an onEdgeSwipeRightStart (irrespective of the current direction). |
onEdgeSwipeRightEnd | End of the swipe gesture. |
Note: onEdgeSwipeLeft
is from the left edge, so you’re actually swiping to the right. Conversely, onEdgeSwipeRight
is from the right edge.
Edge swipe top events | |
---|---|
onEdgeSwipeTopStart | Start of a swipe from the top of the screen. |
onEdgeSwipeTop ? | Called after an onEdgeSwipeTopStart (irrespective of the current direction). |
onEdgeSwipeTopEnd | End of the swipe gesture. |
Edge swipe bottom events | |
---|---|
onEdgeSwipeBottomStart | Start of a swipe from the bottom of the screen. |
onEdgeSwipeBottom ? | Called after an onEdgeSwipeBottomStart (irrespective of the current direction). |
onEdgeSwipeBottomEnd | End of the swipe gesture. |
Edge swipe example
This prototype uses onEdgeSwipeLeft
to make the tickets follow the pull gesture. When pulled far enough the first ticket will drop down.
# when swiping
Screen.onEdgeSwipeLeft ->
# container with tickets follows movement
container.maxX = event.offset.x + 50
# tear off and drop ticket when swiped far enough
if event.offset.x > 200 and torn isnt yes
...
After the onEdgeSwipeLeftEnd
the remaining tickets are moved back to the left edge.
# jump back upon release
Screen.onEdgeSwipeLeftEnd ->
if torn is yes
# Move remaining tickets in the container to the right
for ticket in container.children
ticket.animate
x: ticket.x + container.width
options:
time: 0.2
# … while also moving the container back to the left
container.animate
maxX: 50
options:
time: 0.6
curve: Spring(damping: 0.8)
...