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