Motion Integration #

Gesture support is often coupled with some spring physics animation system.

It allows the gesture animations to feel smoother, and more "organic".

The original library, react-use-gesture, uses their own solution called react-spring.

Luckily, I also made @vueuse/motion that provides a set of composables that plays well with @vueuse/gesture.

What is set() ? #

Looking at the code examples, you might have noticed a function called set().

The set() function comes from the useSpring composable from @vueuse/motion.

useSpring used with useMotionProperties is a powerful combination when it comes to animate elements.

// Get the element.
const demoElement = ref()

// Bind to the element or component reference
// and init style properties that will be animated.
const { motionProperties } = useMotionProperties(demoElement, {
  cursor: 'grab',
  x: 0,
  y: 0,
})

// Bind the motion properties to a spring reactive object.
const { set } = useSpring(motionProperties)

// Animatable values will be animated, the others will be changed immediately.
const eventHandler = () => set({ x: 250, y: 200, cursor: 'default' })

Directives support #

Using useSpring with useMotionProperties allows low level data manipulations.

If you are already using @vueuse/motion, you might be familiar with Directive Usage.

Here is a nice example of combining v-motion with v-drag:

<template>
    <div
        v-motion="'demo'"
        v-drag="handler"
    >
</template>

<script setup>
import { useMotions } from '@vueuse/motion'

// Get motions
const motions = useMotions()

// Drag handler
const handler = ({ movement: [x, y], dragging }) => {
  // Check element existence
  if (!motions.demo) return

  // Reset the box at initial position
  if (!dragging) {
    motions.demo.apply({
      x: 0,
      y: 0,
    })

    return
  }

  // Apply movement values
  motions.demo.apply({
    x,
    y,
  })
}
</script>