Skip to content

vollborn/vue-animations

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue Animations

This package contains some JavaScript & CSS assets for fading elements in on scroll.

Installation

NPM:

npm install vollborn/vue-animations

Yarn:

yarn add vollborn/vue-animations

Usage

To use the scroll animations, you need to import the package to your project beforehand.

// Import the package
import VueAnimations from 'vue-animations';

// Registering the component
Vue.component('VueAnimation', VueAnimations.VueAnimation);

Using the following component you can apply your desired effect.

<VueAnimation type="fade-in">
    Hello World!
</VueAnimation>

You can also apply delay to your animation. The maximum amount of delay is currently set to 5.

<VueAnimation type="fade-in" delay="1">
    Hello World!
</VueAnimation>

Effects

Currently available effect types:

  • fade-in
  • fade-from-left
  • fade-from-right
  • size-fade-in
  • draw-to-right

The types .fade-from-left and .fade-from-right automatically change to .fade-in at 600px screen width for better mobile support.

More Effects

You can simply create your own effects by attaching the class .vue-animations to your element.
If it is visible on screen, the class .applied will be added.

An example:

.vue-animations.fade-in {
    opacity: 0;
    transition: 0.3s ease-in;
}

.vue-animations.applied.fade-in {
    opacity: 1;
}