https://github.com/vollborn/vue-animations

A simple vue package with an animation component to fade elements in
https://github.com/vollborn/vue-animations

animation animations css frontend scroll vue vue-animations vue-css vuejs

Last synced: about 4 hours ago
JSON representation

A simple vue package with an animation component to fade elements in

• Host: GitHub
• URL: https://github.com/vollborn/vue-animations
• Owner: vollborn
• Created: 2021-02-16T17:49:56.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-05-09T16:31:47.000Z (over 2 years ago)
• Last Synced: 2024-10-11T02:40:07.369Z (28 days ago)
• Topics: animation, animations, css, frontend, scroll, vue, vue-animations, vue-css, vuejs
• Language: CSS
• Homepage: https://www.npmjs.com/package/vue-animations
• Size: 13.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue Animations

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

## Installation

NPM:

```shell

npm install vollborn/vue-animations

```

Yarn:

```shell

yarn add vollborn/vue-animations

```

## Usage

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

```js

// 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.

```html

    Hello World!

```

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

```html

    Hello World!

```

## 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:

```css

.vue-animations.fade-in {

    opacity: 0;

    transition: 0.3s ease-in;

}

.vue-animations.applied.fade-in {

    opacity: 1;

}

```