Presets are a set of animations that are bundled with the package.

It allows you to start implementing animations straight after installing the plugin in your Vue app.

You can add your own presets to your app using Custom Directives.

If you have any ideas for new presets add an issue on GitHub, or reach me on Twitter.


<div v-motion-fade />

fade Visible

<div v-motion-fade-visible />

roll Bottom

<div v-motion-roll-bottom />

roll Left

<div v-motion-roll-left />

roll Right

<div v-motion-roll-right />

roll Top

<div v-motion-roll-top />

roll Visible Bottom

<div v-motion-roll-visible-bottom />

roll Visible Left

<div v-motion-roll-visible-left />

roll Visible Right

<div v-motion-roll-visible-right />

roll Visible Top

<div v-motion-roll-visible-top />


<div v-motion-pop />

pop Visible

<div v-motion-pop-visible />

slide Bottom

<div v-motion-slide-bottom />

slide Left

<div v-motion-slide-left />

slide Right

<div v-motion-slide-right />

slide Top

<div v-motion-slide-top />

slide Visible Bottom

<div v-motion-slide-visible-bottom />

slide Visible Left

<div v-motion-slide-visible-left />

slide Visible Right

<div v-motion-slide-visible-right />

slide Visible Top

<div v-motion-slide-visible-top />