Events » Drag events

Drag events

These events are emitted by a draggable layer. They’re triggered not only when the user is dragging but also afterwards, when the layer is still slowing down before coming to a stop.

Basic drag events

The events onDragStart and onDragEnd signal the beginning and end of a drag action, respectively. Between these two, onDrag will be called continuously.

Basic drag events
onDragStartDragging started. The layer has been picked up and moved.
onDrag 🔃The layer changed position.
onDragEndDragging ended.

Here’s a very simple example:

blueSquare.onDragStart ->
    print "Drag started."
blueSquare.onDrag ->
    print "The cursor is at x = #, y = #"
blueSquare.onDragEnd ->
    print "Drag ended."
Download Framer project

Using onDragEnd to have a layer snap back

You can use onDragEnd to have a layer snap back to its original position.

Like this:

# The layer’s initial position
blueSquare.states.defaultPosition =
    x: blueSquare.x
    y: blueSquare.y
# Snapping back to the initial position
blueSquare.onDragEnd ->
    @.animate "defaultPosition"
Download Framer project
A draggable layer that snaps back to its original position

Drag animation events

A layer doesn’t stop moving when the user stops dragging.

By default, momentum and bounce are active, so a draggable layer will briefly animate to a standstill, or bounce back when it’s outside of its constraints.

Drag animation events
onDragAnimationStartStart of the momentum or bounce animation.
onDragAnimationEndMomentum and bounce animations all ended.

A basic example prototype:

blueSquare.onDragAnimationStart ->
    print "The after drag animation did start."
blueSquare.onDragAnimationEnd ->
    print "The after drag animation ended."
Download Framer project

The onDragAnimationStart event signals when the momentum or bounce animation started. It’ll trigger right after onDragEnd.

And onDragAnimationEnd will fire once the layer has come to a complete standstill.

Other events

With direction lock enabled there will be an onDirectionLockStart event whenever the layer locks to a specific direction.

The onMove event gets triggered continuously whenever the layer moves. This includes any movement: by dragging or caused by momentum or bounce animations.

Other events
onDirectionLockStartDirection lock started.
onMove 🔃The layer is moving (includes momentum or bounce animation).

A simple example with direction lock:

blueSquare.onDirectionLockStart ->
    print "The direction lock kicked in."
Download Framer project

Continuous updates of the layer’s position:

blueSquare.onMove ->
    print "The layer is at x = #, y = #"
Download Framer project

Example with different drag events

These three events are used in the following example:

  • onDragStart grows the layer and adds a shadow
  • onMove adjusts the hue and lightness continuously
  • onDragAnimationEnd shrinks the layer and removes the shadow
# Start of drag movement
square.onDragStart ->
        scale: 1
        shadowColor: "rgba(153,153,153,1)"
# While moving (also because of momentum)
square.onMove ->
    # Change hue depending on y-position
    # Change lightness depending on x-position
# Put down when it came to a complete standstill
square.onDragAnimationEnd ->
        scale: 0.94
        shadowColor: "White"
Download Framer project
Drag events example
onDragStart and onDragAnimationEnd toggle the shadow
onMove changes the hue and lightness

Example use: Top hat

This prototype lets you prepare a magician’s top hat for his hat-trick (which will end with a Bang!).

It uses the onDragStart, onDrag, and onDragEnd events.

Preparing the magician’s hat
Download Framer project

The hat grows slightly (with a spring animation) when dragging starts.

# grow the hat when dragging starts
magicItem.onDragStart ->
        scale: 1.2

The hat is then continuously aimed at the item that’s being dragged.

# rotate the hat to the item during dragging
magicItem.onDrag ->
    # some trigonometry for calculating the rotation
    rotationRadians = Math.atan (this.x - topHat.x) / (this.y - topHat.y)
    # converting radians to degrees
    rotationDegrees = rotationRadians * 180/Math.PI
    # rotating the hat in the direction of the item
    topHat.rotation = -rotationDegrees + 180

Finally, when dragging ends, the hat will swallow the item with an ease-in animation…

# when dragging ends:
magicItem.onDragEnd ->
    # move item to the top hat
    this.animateStop() # Stop possible animations
        x: topHat.x + 45
        y: topHat.y + 10
            time: 0.4
            curve: "ease-in"

…and then return to its initial state.

    # and after a 0.7 second delay…
    Utils.delay 0.7, ->
        # … reset the hat to its initial state
            scale: 1
            rotation: 180

Overview of the drag events

The different dragging events
Download Framer project