vue-hopsa v0.3.3

Hopsa

SVG Clipping transitions for vue components

Usage

<template>
    <div>
        <!-- Wrap your component with Hopsa -->
        <hopsa :animation="'circle'" :options="options">
            <template v-slot:content>
            
            <!-- CONTENT HERE -->
            <my-awesome-component></my-awesome-component>

            </template>
        </hopsa>
    </div>
</template>
import Hopsa from 'vue-hopsa' 
import MyAwesomeComponent from 'my/aweseome/path'

// Install plugin 
Vue.use(Hopsa)

export default {
  data: () => ({
      options: {
        duration: 1000,
        radius: 2000,
        delay: 1000,
        onComplete: () => {},
        
      }
  }),
  components: {
    MyAwesomeComponent
  }
  ...
}

Animations

• Circle
• Box
• Batman
• Bars

Options

Custom animations

Animation can easily be created by extending BaseAnimation class for use with hopsa component.

Hopsa uses svg.js

You can add svg elements to this.hopsa.clip

class MyAwesomeAnimation extends BaseAnimation {
  init() {
    
    this.circle = this.hopsaInstance.draw.circle(0).move(this.hopsaInstance.contentWidth / 2.5, this.hopsaInstance.contentHeight / 2).fill("#fff");
    this.hopsa.clip.add(this.circle);

  }

}



}