aos-modern 3.0.0

package/src/sass/_animations.scss

@@ -0,0 +1,334 @@
+// Animations variables
+$aos-distance: 100px !default;
+
+
+
+
+/**
+ * Fade animations:
+ * fade
+ * fade-up, fade-down, fade-left, fade-right
+ * fade-up-right, fade-up-left, fade-down-right, fade-down-left
+ */
+
+[data-aos^='fade'][data-aos^='fade'] {
+  opacity: 0;
+  transition-property: opacity, transform;
+
+  &.aos-animate {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+[data-aos='fade-up'] {
+  transform: translate3d(0, $aos-distance, 0);
+}
+
+[data-aos='fade-down'] {
+  transform: translate3d(0, -$aos-distance, 0);
+}
+
+[data-aos='fade-right'] {
+  transform: translate3d(-$aos-distance, 0, 0);
+}
+
+[data-aos='fade-left'] {
+  transform: translate3d($aos-distance, 0, 0);
+}
+
+[data-aos='fade-up-right'] {
+  transform: translate3d(-$aos-distance, $aos-distance, 0);
+}
+
+[data-aos='fade-up-left'] {
+  transform: translate3d($aos-distance, $aos-distance, 0);
+}
+
+[data-aos='fade-down-right'] {
+  transform: translate3d(-$aos-distance, -$aos-distance, 0);
+}
+
+[data-aos='fade-down-left'] {
+  transform: translate3d($aos-distance, -$aos-distance, 0);
+}
+
+
+
+
+/**
+ * Zoom animations:
+ * zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right
+ * zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right
+ */
+
+[data-aos^='zoom'][data-aos^='zoom'] {
+  opacity: 0;
+  transition-property: opacity, transform;
+
+  &.aos-animate {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+[data-aos='zoom-in'] {
+  transform: scale(.6);
+}
+
+[data-aos='zoom-in-up'] {
+  transform: translate3d(0, $aos-distance, 0) scale(.6);
+}
+
+[data-aos='zoom-in-down'] {
+  transform: translate3d(0, -$aos-distance, 0) scale(.6);
+}
+
+[data-aos='zoom-in-right'] {
+  transform: translate3d(-$aos-distance, 0, 0) scale(.6);
+}
+
+[data-aos='zoom-in-left'] {
+  transform: translate3d($aos-distance, 0, 0) scale(.6);
+}
+
+[data-aos='zoom-out'] {
+  transform: scale(1.2);
+}
+
+[data-aos='zoom-out-up'] {
+  transform: translate3d(0, $aos-distance, 0) scale(1.2);
+}
+
+[data-aos='zoom-out-down'] {
+  transform: translate3d(0, -$aos-distance, 0) scale(1.2);
+}
+
+[data-aos='zoom-out-right'] {
+  transform: translate3d(-$aos-distance, 0, 0) scale(1.2);
+}
+
+[data-aos='zoom-out-left'] {
+  transform: translate3d($aos-distance, 0, 0) scale(1.2);
+}
+
+
+
+
+/**
+ * Slide animations
+ */
+
+[data-aos^='slide'][data-aos^='slide'] {
+  transition-property: transform;
+
+  &.aos-animate {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+[data-aos='slide-up'] {
+  transform: translate3d(0, 100%, 0);
+}
+
+[data-aos='slide-down'] {
+  transform: translate3d(0, -100%, 0);
+}
+
+[data-aos='slide-right'] {
+  transform: translate3d(-100%, 0, 0);
+}
+
+[data-aos='slide-left'] {
+  transform: translate3d(100%, 0, 0);
+}
+
+
+
+
+/**
+ * Flip animations:
+ * flip-left, flip-right, flip-up, flip-down
+ */
+
+[data-aos^='flip'][data-aos^='flip'] {
+  backface-visibility: hidden;
+  transition-property: transform;
+}
+
+[data-aos='flip-left'] {
+  transform: perspective(2500px) rotateY(-100deg);
+  &.aos-animate {transform: perspective(2500px) rotateY(0);}
+}
+
+[data-aos='flip-right'] {
+  transform: perspective(2500px) rotateY(100deg);
+  &.aos-animate {transform: perspective(2500px) rotateY(0);}
+}
+
+[data-aos='flip-up'] {
+  transform: perspective(2500px) rotateX(-100deg);
+  &.aos-animate {transform: perspective(2500px) rotateX(0);}
+}
+
+[data-aos='flip-down'] {
+  transform: perspective(2500px) rotateX(100deg);
+  &.aos-animate {transform: perspective(2500px) rotateX(0);}
+}
+
+/**
+ * Blur animations
+ */
+
+[data-aos^='blur'][data-aos^='blur'] {
+  opacity: 0;
+  filter: blur(12px);
+  transition-property: opacity, filter, transform;
+
+  &.aos-animate {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+[data-aos='blur-in'] {
+  transform: scale(0.95);
+}
+
+[data-aos='blur-in-up'] {
+  transform: translate3d(0, $aos-distance, 0);
+}
+
+[data-aos='blur-in-down'] {
+  transform: translate3d(0, -$aos-distance, 0);
+}
+
+[data-aos='blur-in-left'] {
+  transform: translate3d($aos-distance, 0, 0);
+}
+
+[data-aos='blur-in-right'] {
+  transform: translate3d(-$aos-distance, 0, 0);
+}
+
+
+/**
+ * Skew animations
+ */
+
+[data-aos^='skew'][data-aos^='skew'] {
+  opacity: 0;
+  transition-property: opacity, transform;
+
+  &.aos-animate {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) skew(0deg, 0deg);
+  }
+}
+
+[data-aos='skew-up'] {
+  transform: translate3d(0, $aos-distance, 0) skewY(5deg);
+}
+
+[data-aos='skew-down'] {
+  transform: translate3d(0, -$aos-distance, 0) skewY(-5deg);
+}
+
+
+/**
+ * Rotate animations
+ */
+
+[data-aos^='rotate-in'][data-aos^='rotate-in'] {
+  opacity: 0;
+  transition-property: opacity, transform;
+
+  &.aos-animate {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) rotate(0deg);
+  }
+}
+
+[data-aos='rotate-in'] {
+  transform: rotate(-200deg);
+}
+
+[data-aos='rotate-in-up-left'] {
+  transform: translate3d(-$aos-distance, $aos-distance, 0) rotate(-45deg);
+}
+
+[data-aos='rotate-in-up-right'] {
+  transform: translate3d($aos-distance, $aos-distance, 0) rotate(45deg);
+}
+
+[data-aos='rotate-in-down-left'] {
+  transform: translate3d(-$aos-distance, -$aos-distance, 0) rotate(45deg);
+}
+
+[data-aos='rotate-in-down-right'] {
+  transform: translate3d($aos-distance, -$aos-distance, 0) rotate(-45deg);
+}
+
+
+/**
+ * Back animations
+ */
+
+[data-aos^='back-in'][data-aos^='back-in'] {
+  opacity: 0;
+  transition-property: opacity, transform;
+
+  &.aos-animate {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+[data-aos='back-in'] {
+  transform: scale(0.7);
+}
+
+[data-aos='back-in-up'] {
+  transform: translate3d(0, $aos-distance * 2, 0) scale(0.7);
+}
+
+[data-aos='back-in-down'] {
+  transform: translate3d(0, -$aos-distance * 2, 0) scale(0.7);
+}
+
+[data-aos='back-in-left'] {
+  transform: translate3d(-$aos-distance * 2, 0, 0) scale(0.7);
+}
+
+[data-aos='back-in-right'] {
+  transform: translate3d($aos-distance * 2, 0, 0) scale(0.7);
+}
+
+
+/**
+ * Specials
+ */
+
+[data-aos='roll-in'] {
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0) rotate(-120deg);
+  transition-property: opacity, transform;
+
+  &.aos-animate {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) rotate(0deg);
+  }
+}
+
+[data-aos='jack-in-the-box'] {
+  opacity: 0;
+  transform: scale(0.1) rotate(-30deg);
+  transform-origin: center bottom;
+  transition-property: opacity, transform;
+
+  &.aos-animate {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+}

package/src/sass/_core.scss

@@ -0,0 +1,18 @@
+// Generate Duration && Delay
+[data-aos] {
+  @for $i from 1 through 60 {
+    body[data-aos-duration='#{$i * 50}'] &,
+    &[data-aos][data-aos-duration='#{$i * 50}'] {
+      transition-duration: #{$i * 50}ms;
+    }
+
+    body[data-aos-delay='#{$i * 50}'] &,
+    &[data-aos][data-aos-delay='#{$i * 50}'] {
+      transition-delay: 0;
+
+      &.aos-animate {
+        transition-delay: #{$i * 50}ms;
+      }
+    }
+  }
+}

package/src/sass/_easing.scss

@@ -0,0 +1,40 @@
+$aos-easing: (
+  linear: cubic-bezier(.250, .250, .750, .750),
+
+  ease: cubic-bezier(.250, .100, .250, 1),
+  ease-in: cubic-bezier(.420, 0, 1, 1),
+  ease-out: cubic-bezier(.000, 0, .580, 1),
+  ease-in-out: cubic-bezier(.420, 0, .580, 1),
+
+  ease-in-back: cubic-bezier(.6, -.28, .735, .045),
+  ease-out-back: cubic-bezier(.175, .885, .32, 1.275),
+  ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55),
+
+  ease-in-sine: cubic-bezier(.47, 0, .745, .715),
+  ease-out-sine: cubic-bezier(.39, .575, .565, 1),
+  ease-in-out-sine: cubic-bezier(.445, .05, .55, .95),
+
+  ease-in-quad: cubic-bezier(.55, .085, .68, .53),
+  ease-out-quad: cubic-bezier(.25, .46, .45, .94),
+  ease-in-out-quad: cubic-bezier(.455, .03, .515, .955),
+
+  ease-in-cubic: cubic-bezier(.55, .085, .68, .53),
+  ease-out-cubic: cubic-bezier(.25, .46, .45, .94),
+  ease-in-out-cubic: cubic-bezier(.455, .03, .515, .955),
+
+  ease-in-quart: cubic-bezier(.55, .085, .68, .53),
+  ease-out-quart: cubic-bezier(.25, .46, .45, .94),
+  ease-in-out-quart: cubic-bezier(.455, .03, .515, .955)
+);
+
+// Easings implementations
+// Default timing function: 'ease'
+
+[data-aos] {
+  @each $key, $val in $aos-easing {
+    body[data-aos-easing="#{$key}"] &,
+    &[data-aos][data-aos-easing="#{$key}"] {
+      transition-timing-function: $val;
+    }
+  }
+}

package/src/sass/aos.scss

@@ -0,0 +1,3 @@
+@use 'core';
+@use 'easing';
+@use 'animations';

package/src/vue/index.js

@@ -0,0 +1,65 @@
+import AOS from '../js/aos';
+
+/**
+ * Vue Plugin and Directive for AOS.
+ * Supports both Vue 2 and Vue 3.
+ */
+export const AOSPlugin = {
+  install(app, defaultOptions = {}) {
+    AOS.init(defaultOptions);
+
+    const directiveConfig = {
+      mounted(el, binding) {
+        setupElement(el, binding);
+      },
+      unmounted() {
+        AOS.refresh();
+      },
+      // Vue 2 fallback compatibility hooks
+      inserted(el, binding) {
+        setupElement(el, binding);
+      },
+      unbind() {
+        AOS.refresh();
+      }
+    };
+
+    // Register v-aos directive
+    if (app.directive) {
+      app.directive('aos', directiveConfig);
+    }
+  }
+};
+
+function setupElement(el, binding) {
+  if (binding.value) {
+    if (typeof binding.value === 'string') {
+      el.setAttribute('data-aos', binding.value);
+    } else if (typeof binding.value === 'object') {
+      // Support object configuration: v-aos="{ animation: 'fade-up', delay: 100, once: true }"
+      if (binding.value.animation) {
+        el.setAttribute('data-aos', binding.value.animation);
+      }
+      if (binding.value.delay !== undefined) {
+        el.setAttribute('data-aos-delay', binding.value.delay);
+      }
+      if (binding.value.duration !== undefined) {
+        el.setAttribute('data-aos-duration', binding.value.duration);
+      }
+      if (binding.value.offset !== undefined) {
+        el.setAttribute('data-aos-offset', binding.value.offset);
+      }
+      if (binding.value.once !== undefined) {
+        el.setAttribute('data-aos-once', binding.value.once);
+      }
+    }
+  }
+
+  if (binding.arg) {
+    el.setAttribute('data-aos', binding.arg);
+  }
+
+  AOS.refresh();
+}
+
+export default AOSPlugin;