Home

Getting Started

The built-in transition system in VueJS is a breeze to use, but there is only so much you can do with CSS transitions. I wanted something more robust, but with same ease of use. Enter: Animeta.

This VueJS library marries the awesome power of AnimeJS with Vue's great built-in transition system, allowing developers to effortlessly implement impressive animations and transitions in their Vue-based apps.

---

Getting started is easy. First, install the package:

npm install vue-animeta --save

Then, include it in the component you want to use it in:

import animetaComponents from 'vue-animeta'

export default {
  components: {
    ...animetaComponents
  }
}

Single Elements/Components

The usage of the animeta transition component is the same as the built-in VueJS transition. The only difference is that instead of CSS, you pass a to, from and options object to the component to define the transition.

You can find a full list of properties you can use in the AnimeJS documentation.

              <div class="demo">
                <animeta-transition
                  :to="singleTo"
                  :from="singleFrom"
                  :options="singleOptions"
                >
                  <div class="demo-box" v-if="!singleHidden"></div>
                </animeta-transition>
              </div>
              <div class="demo-controls">
                <button class="button" @click="singleHidden = !singleHidden">
                  Click me
                </button>
              </div>

const to = {
  scale: 1,
  opacity: 1,
  translateX: 0,
  translateY: 0,
  borderRadius: 15
}

const from = {
  scale: 0,
  opacity: 0,
  translateX: 300,
  translateY: 300,
  borderRadius: 100
}

const options = {
  duration: 750
}

<animeta-transition
  :to="{ ...to }"
  :from="{ ...from }"
  :options="{ ...options }"
  @after-leave="doSomething()"
  @after-enter="doSomething()"
>
  <div v-if="!hidden"></div>
</animeta-transition>

  <section class="section">
    <div class="section-inner">
      <h2 class="title is-small">Transition Lists</h2>
      <div class="columns">
        <div class="column">
          <p>
            As with single components, lists are also largely the same as
            their
            <a
              href="//vuejs.org/v2/guide/transitions.html#List-Transitions"
              target="_blank"
              >Vue counterparts</a
            >. Transitions are defined the same way as single components.
          </p>
          <p>
            The one caveat is you <em>must</em> include the
            <strong>data-index</strong> property on the list items. This
            value should be the same as the index of the item in the array.
          </p>
          <div class="demo">
            <animeta-transition-group
              tag="ul"
              class="demo-list"
              :to="{ scale: 1, opacity: 1 }"
              :from="{ scale: 0, opacity: 0 }"
              :options="{ duration: 500, delay: 50 }"
            >
              <li
                v-for="(item, i) in filteredList"
                :key="i"
                :data-index="i"
              ></li>
            </animeta-transition-group>
          </div>
          <div class="demo-controls">
            <button class="button" @click="filterList = !filterList">
              Click me
            </button>
          </div>
        </div>
        <div class="column">
          <pre class="code">

<animeta-transition-group tag="ul" :to="{ scale: 1, opacity: 1 }" :from="{ scale: 0, opacity: 0 }" :options="{ duration: 500, delay: 50 }" > <li v-for="(item, i) in computedList" :key="i" :data-index="i" ></li> </animeta-transition-group>

  <div class="section">
    <hr class="rule" />
  </div>