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 />

fade Visible Once

<div v-motion-fade-visible-once />

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 />

roll Visible Once Bottom

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

roll Visible Once Left

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

roll Visible Once Right

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

roll Visible Once Top

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


<div v-motion-pop />

pop Visible

<div v-motion-pop-visible />

pop Visible Once

<div v-motion-pop-visible-once />

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 />

slide Visible Once Bottom

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

slide Visible Once Left

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

slide Visible Once Right

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

slide Visible Once Top

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