add delay to presets animation

[Chandler-Zhu]

Is there a way to add delay to the preset animation ? The doc didn't mention this, if you plan to add this in the future, I think this syntax would look good: <div v-motion-slide-right :delay="500" /> The feature I wanted to add to my app is to v-for loop through an array and give each item a different delay based on their index, if this is possible with the current version please let me know how, thanks

[kevinlaw91]

Adding :duration would be helpful too

[kalnode]

This would help a lot!

Using the presets is powerful and takes you far for quick app building, but the moment you want to tweak a "scene" such that everything doesn't animate at once (on mount), you have to seemingly abandon the presets and start making custom motions... so the wind is out of your sails. Who would want to re-build fundamentals (simple fades, slides, pops, etc) simply to have tweaked delay or duration?

[kalnode]

Re: your specific concern

The feature I wanted to add to my app is to v-for loop through an array and give each item a different delay based on their index, if this is possible with the current version please let me know how, thanks

This is essentially staggered animation, and although the way you describe may be possible with a convenient preset-adjustment as we're all talking about, I think that staggered-anim is still better served by using custom motions triggered by Vue animation hooks, all wrapped in a <TransitionGroup>. This is exactly what I've done using this library for staggered list animations. Look at any matured staggered animation situaiton and usually you do it all in JS such that you can control all the nuances, e.g. wait for an image to load, properly delete removed items, remove row-by-row, etc.

[innocenzi]

I think this should be considered a bug, it's very confusing that the :delay is applied to all motion directives within a v-for and not to individual elements:

<div v-for="i in 5" :key="i">
    <div
        v-motion-slide-visible-left
        :delay="100 * i"
    />
</div>