Confetti Animation Effect In Vue.js

Confetti Animation Effect In Vue.js

A Vue component for creating a confetti animation effect on the web app.

vue-confetti

npm version semantic-release

:tada: A Vue component for dropping confetti :tada:

Example animation

View the demo

Installation

npm install vue-confetti --save

Usage

<template>
  <main>
    <button @click="start">Start</button>
    <button @click="stop">Stop</button>
    <button @click="love">Show some love</button>
  </main>
</template>

<script>
  import Vue from 'vue'
  import VueConfetti from 'vue-confetti'

  Vue.use(VueConfetti)

  export default {
    methods: {
      start() {
        this.$confetti.start();
      },

      stop() {
        this.$confetti.stop();
      }

      love() {
        this.$confetti.update({
          shape: 'heart',
          colors: [
            'red',
            'pink',
            '#ba0000'
          ],
        });
      }
    }
  }
</script>

Configuration

The following options can be passed to $confetti.start() or $confetti.update():

Property Type Description Default
shape String The shape of the confetti ('circle', 'rect', or 'heart'). 'circle'
size Number The size of the particles (should be a positive number). 10
dropRate Number The speed at which the particles fall. 10
colors Array The confetti colors. ['DodgerBlue', 'OliveDrab', 'Gold', 'pink', 'SlateBlue', 'lightblue', 'Violet', 'PaleGreen', 'SteelBlue', 'SandyBrown', 'Chocolate', 'Crimson']

Example

$confetti.start({
  shape: 'heart',
  colors: [
    'red',
    'pink',
    '#ba0000',
  ],
});

Development

The following scripts are available for local development:

# test
npm run test

# run with webpack watch
npm run dev

# build for production
npm run build

Note that vue-confetti enforces conventional commits to help automate the release process. Whenever code is merged into master the next semantic version number is automatically determined, a changelog generated and the release published.

Github Repository

Tags: #Vue.js