Gestures

Take visual control over the interaction

Several interaction methods are supported with Svelte Motion. The following props have been tested, but more may work, see documentation for framer motion.

Drag

If you add the drag property to the Motion component it becomes draggable. You can lock the direction by setting it to ‘x’ or ‘y’. dragConstraints can also be added, either by pixels (top, left, right, bottom) or via this-binding of an object.

If dragging does not seem to work on touch-screen devices, try adding the css prop

touch-action: none;

to the bounding container.

Hover & Tap

Hover events can be animated with the whileHover prop, tap events (which also includes mouseclicks) by the whileTap prop.

<Motion let:motion whileHover={{scale:1.2}} whileTap={{rotate:45}}>
    <button use:motion>Click Me</button>
</Motion>

For tracking of the hover events the following callbacks are also available at the Motion component:

• onHoverStart(event,info)
• onHoverEnd(event,info)

For tap events there are the following callbacks:

• onTapStart(event,info)
• onTap(event,info)
• onTapCancel(event,info)

Focus

To animate an element when it receives focus you can use the whileFocus prop.

<Motion whileFocus={{ scale: 1.5 }}let:motion>
    <input value="text input" use:motion type="text"/>
</Motion>

Pan

When your mouse or finger points down on an element and you move at least 3 pixels, a pan event fires. Options for handling it on the Motion component are:

• onPan(event, info)
• onPanStart(event, info)
• onPanEnd(event, info)

The info object holds a lot of information, each as an object with attributes x and y:

• point
• delta
• offset
• velocity