Framer Classic » Events » Swipe events

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
onSwipeStartThe user has panned on the layer for a distance of 30 points, in any direction.
onSwipe 🔃The user is still swiping.
onSwipeEndEnd 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
onSwipeLeftStartLike onSwipeStart, but only called when swiping left.
onSwipeLeft 🔃Called after a onSwipeLeftStart (irrespective of the current direction).
onSwipeLeftEndEnd of the swiping gesture which started off going left.
Swipe right events
onSwipeRightStartLike onSwipeStart, but only called when swiping right.
onSwipeRight 🔃Called after a onSwipeRightStart (irrespective of the current direction).
onSwipeRightEndEnd of the swiping gesture which started off going right.
Swipe up events
onSwipeUpStartLike onSwipeStart, but only called when swiping upwards.
onSwipeUp 🔃Called after a onSwipeUpStart (irrespective of the current direction).
onSwipeUpEndEnd of the swiping gesture which started off going up.
Swipe down events
onSwipeDownStartLike onSwipeStart, but only called when swiping downwards.
onSwipeDown 🔃Called after a onSwipeDownStart (irrespective of the current direction).
onSwipeDownEndEnd 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-axis
  • onSwipeRightStart rotates the layer 20º around the y-axis (in the opposite direction)
  • onSwipeDownStart rotates the layer 20º around the x-axis
  • onSwipeUpStart rotates the layer 20º around the x-axis (in the opposite direction)
  • onSwipe repositions the layer continuously, like if it was a draggable layer
  • onSwipeEnd looks at the event.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()
Open in Framer
Swipe example
onSwipeLeftStart (and Right, Up, Down) make the layer rotate
onSwipe repositions the layer (like a draggable)
onSwipeEnd throws it off-screen (when there’s enough velocity)

Overview of the swipe events

The different swipe events
Open in Framer

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
onEdgeSwipeStartStart of a swipe from any edge of the screen.
onEdgeSwipe 🔃Still swiping.
onEdgeSwipeEndEnd 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
onEdgeSwipeLeftStartStart of a swipe from the left edge of the screen.
onEdgeSwipeLeft 🔃Called after an onEdgeSwipeLeftStart (irrespective of the current direction).
onEdgeSwipeLeftEndEnd of the swipe gesture.
Edge swipe right events
onEdgeSwipeRightStartStart of a swipe from the right edge of the screen.
onEdgeSwipeRight 🔃Called after an onEdgeSwipeRightStart (irrespective of the current direction).
onEdgeSwipeRightEndEnd 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
onEdgeSwipeTopStartStart of a swipe from the top of the screen.
onEdgeSwipeTop 🔃Called after an onEdgeSwipeTopStart (irrespective of the current direction).
onEdgeSwipeTopEndEnd of the swipe gesture.
Edge swipe bottom events
onEdgeSwipeBottomStartStart of a swipe from the bottom of the screen.
onEdgeSwipeBottom 🔃Called after an onEdgeSwipeBottomStart (irrespective of the current direction).
onEdgeSwipeBottomEndEnd 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)
        ...
Open in Framer

Overview of the edge swipe events

The different edge swipe events
Open in Framer

Leave a Reply