Support nested objects for values:

values: {
  size: {
    width: 300,
    height: 200,
  },
}

<Motion :values="values">
  <template scope="_values">
    {{ _values.size.width }}x{{ _values.size.height }}
  </template>
</Motion>

Hi, would be great to have more control on animations...

Or, one option could be add a preset animation instant to disable animation ...

Public API for the Motion component that would allow to read and set currentVelocities. Not sure if this would set idealVelocities as well.
Use case adding a new value, setting the velocity to an existing one

I can't properly access https://posva.net/vue-motion/ 🤔

Ok. This example from Docs make no sense for me. Sorry.

<Motion :value="offset" tag="div">
  <div slot-scope="props" :style="{ transform: `translateX(${props.value}px)` }"></div>
</Motion>
// in the component
this.offset = 200

1. What component you are talking about?
2. What is this.offset?
3. What is props?

I have problem with mouse events in nuxt.
My Codesanbox link: https://codesandbox.io/s/summer-haze-m6dvr?file=/pages/index.vue

My position will not always update inside the motion component, only somtimes after a lot reloads it works. Sometimes just for a short time.

Hi,

It seems you need to set that limit, because CSS don't have unlimited values feature.

And it could brake that CSS property.

I want to hide the non selected items, only after the animation ends (because if I remove them before the animation breaks) but I am experiencing a bit of delay as you can see in the video below.

Any suggestions?

http://recordit.co/1yhMugy8Lb

...

Hi, first of all, I love the library! but i'm struggling to create a dynamic carrousel that appends / removes items in a list. I get errors for the items that do not exist yet in the new list. Is there a way to provide default values for new items?

Simple example:

<template>
<ul>
  <Motion :values="children">
    <div slot-scope="_children">
      <div v-for="(child, index) in _children" :key="index">
        <p>{{child.offset}}</p>
      </div>
    </div>
  </Motion>
  <button v-on:click="testPush">test Push</button>
  <button v-on:click="test">test</button>
</ul>
</template>

<script lang="ts">
import { Motion } from "vue-motion"

export default {
  components: {
    Motion
  },
  data() {
    return {
      children: [{
        offset: 0,
      }],
    }
  },
  methods: {
    test() {
      this.$data.children = [{offset: 100}, {offset: 200}]
    },
    testPush() {
      this.$data.children.push({offset: 200})
    }
  }
}
</script>

Thanks!

I don't think it's that useful but hey, it's so fancy

The current state of this feature: ❌ Not worth the cost implementing
If you know of any other use cases that would make this feature worth adding, please, share them 🙂

Like in the title. The websites are down :(

Hi @posva , thanks for bringing react plugin into vue world. But it seems currently the demo was broken, when I open the link on the description above, it didn't show anything. I saw the console and this message was appear.