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

| Name |Default | Text| |---|---|---| | duration | 1000 | Time of animation in ms| | delay | 0 | Delay of animation in ms| | easing | backOut | Easing function for animation | | autostart | true | Start enter transition on mount| | removeSVGOnComplete | false | Remove svg overlay, for making content active| | minWidth | 200 | Min width for overlay| | minHeight | 200 | Min height for overlay|

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);

  }

}



}