useSpring example not working

[boydenhartog]

Hi,

I've used the useSpring example from the documentation but it doesn't seem to work. Am I missing something or is the documentation incorrect? This is my very simple component. I have globally installed vue motion in my app.

When I click the div, I see 'click' appear in the console but no animation is triggered.

I get an error in this codesandbox when triggering the animation that I'm not getting in my local app, I'm not sure if it's related. Cannot read properties of undefined (reading 'apply') https://codesandbox.io/s/vueuse-motion-forked-i76zv6?file=/src/components/Bar.vue

Can anyone shed some light?

<template>
  <div ref="target" class="bar" @click="onClick"></div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useSpring } from "@vueuse/motion";

const target = ref<HTMLElement>()

const { set, values, stop } = useSpring(target as any, {
  damping: 50,
  stiffness: 220,
})

const onClick = () => {
  console.log('click')
  set({
    scale: 3,
  })
}

const onClickOut = () => {
  set({
    scale: 1,
  })
}

const stopTransitions = () => {
  stop()
}
</script>

<style lang="scss">
.bar {
  height: 100px;
  width: 40px;
  background-color: red;
}
</style>

[didavid61202]

@boydenhartog I think the doc might have been changed and us outdated. After looking at useSpring's implementation, I think you can try using it like this: stackblitz demo with Nuxt 3

[blisst]

I updated @didavid61202 's great work to use the reactiveTransform composable from Vue Motion. That made a bit more sense to me and I'm guessing that's how the authors of this library intended it to be used?

Basically reactiveTransform outputs a state variable which useSpring can animate, which is then tied to a transform reactive variable which can then be bound to the actual element's style.

https://stackblitz.com/edit/nuxt-starter-vujfqb?file=app.vue

[fgd007]

The example in the docs is still not working 1.5 years in

[BobbieGoede]

Resolved by #181