Initial commit

Author: vollborn

.gitignore

@@ -0,0 +1 @@
+.idea

index.js

@@ -0,0 +1,23 @@
+require('./src/css/animations.css');
+
+let elements = [];
+
+const elementIsOnScreen = function (element) {
+  let rect = element.getBoundingClientRect();
+  let elemTop = rect.top + 100;
+  let elemBottom = rect.bottom;
+  return elemTop < window.innerHeight && elemBottom >= 0;
+}
+
+const handleAnimations = function () {
+  elements = Array.from(document.getElementsByClassName('vue-animations'));
+  for (let i = 0; i < elements.length; i++) {
+    let elem = elements[i];
+    if (!elem.classList.contains('applied') && elementIsOnScreen(elem)) {
+      elem.classList.add('applied');
+    }
+  }
+}
+
+document.addEventListener('scroll', handleAnimations);
+module.exports = {}

package.json

@@ -0,0 +1,25 @@
+{
+  "private": "true",
+  "name": "vue-animations",
+  "version": "0.0.1",
+  "description": "A simple vue package with some animation classes to fade elements in",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vollborn/vue-animations.git"
+  },
+  "keywords": [
+    "animations",
+    "effects",
+    "vue"
+  ],
+  "author": "Oliver Vollborn",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vollborn/vue-animations/issues"
+  },
+  "homepage": "https://github.com/vollborn/vue-animations#readme"
+}

src/css/animations.css

@@ -0,0 +1,90 @@
+/*
+    Animations
+*/
+
+.vue-animations.fade-in {
+    opacity: 0;
+    transition: 0.3s ease-in;
+}
+
+.vue-animations.fade-from-left {
+    opacity: 0;
+    transform: translate(-30px, 0);
+    transition: 0.5s ease-out;
+}
+
+.vue-animations.fade-from-right {
+    opacity: 0;
+    transform: translate(30px, 0);
+    transition: 0.5s ease-out;
+}
+
+.vue-animations.size-fade-in {
+    opacity: 0;
+    transform: scale(0.8, 0.8);
+    transition: 0.5s ease-out;
+}
+
+.vue-animations.draw-to-right {
+    width: 0;
+    transition: 0.5s ease-in-out;
+}
+
+/*
+    Applied
+*/
+
+.vue-animations.applied.fade-in {
+    opacity: 1;
+}
+
+.vue-animations.applied.fade-from-left {
+    opacity: 1;
+    transform: none;
+}
+
+.vue-animations.applied.fade-from-right {
+    opacity: 1;
+    transform: none;
+}
+
+.vue-animations.applied.size-fade-in {
+    opacity: 1;
+    transform: none;
+}
+
+.vue-animations.applied.draw-to-right {
+    width: 100%;
+}
+
+@media only screen and (max-width: 800px) {
+    .vue-animations.fade-in,
+    .vue-animations.fade-from-left,
+    .vue-animations.fade-from-right {
+        opacity: 0;
+        transition: 0.3s ease-in;
+        transform: unset;
+    }
+
+    .vue-animations.applied.fade-in,
+    .vue-animations.applied.fade-from-left,
+    .vue-animations.applied.fade-from-right {
+        opacity: 1;
+    }
+}
+
+/*
+    Additions
+*/
+
+.delay-1 {
+    transition-delay: 0.3s;
+}
+
+.delay-2 {
+    transition-delay: 0.6s;
+}
+
+.delay-3 {
+    transition-delay: 0.9s;
+}