schlunsen / vue-hopsa

Vue SVG clipPath transitions

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

  }

}



}